DEV Community

Cover image for Top 5 Icon websites for devs and designers!!!
Youssef Hafnawy
Youssef Hafnawy

Posted on • Updated on

 

Top 5 Icon websites for devs and designers!!!

Introduction:

Everyone needs a website to get icons from it, Choosing the right icons is like putting a cherry on top of a cake, don't complete without it.

Whether you want to create a design from scratch or update an old design, a high-quality set of icons will definitely help.

You don't want to use bad or outdated icons, They can differentiate between good and bad design.

I have collected for you Top 5 icon websites for devs and designers.

I chose these sites from personal experience as I am not a designer, so sites that offer high quality and easy to use icons were really helpful.

Through these sites, you can get the icons in all formats ( png - svg - atc.... )

Today's collection is diverse where you will find everything; Hand-drawn icons, animated icons, and 3D icons and more.

And I will not talk about how many icons the site has or how many users it has, as all the sites say that it is the largest library of icons, the most trusted, the most diverse, and others, but in general these are famous sites so expect quality.

Honorable Mention:

  • If you want to get the famous programming icons and logos Here is an open source GitHub repo for that simple-icons

Material Icon Theme

material icon github repo

  • You can also see Material Icon Theme Yes, the famous VsCode extension also has an open source GitHub repo.

Streamline

Streamline home page

  • Streamline has a large variety of icons and is considered one of the most famous sites in the field, but because I discovered it recently and I do not have much experience with it, and also there is no such thing as the best 11 icon sites.

Without further ado, Top 5 icon websites for devs and designers:

1- fontawesome

fontawesome home page

You can't get more classic than that.

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

it offers a library and toolkit of icons suitable for programmers Where when you download the library you can just use a class on an <i></i> element and it will work.

<i class="fa-duotone fa-camera-retro fa-beat" style="color: #1c7ed6;"></i>
Enter fullscreen mode Exit fullscreen mode

You can modify the shape and color of the icon and even add animation to it.

fontawesome home page

Great for Developers:
We've got frameworks and toolkits for the most popular plugins and packages that already work the way you expect.

Great for Designers
Use your own designs alongside thousands of matching Font Awesome icons in each of six unique styles.


2- flaticon

flaticon home page

The most diverse in terms of icon styles.

Icon Fonts for any project, big or small
+8,300 SVG and 0.000000ont files based on vector icons optimized for web, iOS, and Android applications.

Another excellent site in terms of compatibility with programmers and designers.

When I search for a new style icon, I always start searching here, where you will find an icon that expresses everything you want.

And if you are a heavy user of Notion and want to put an icon for each page like me, this site is very suitable for you.

flaticon page

Access 8.5M+ vector icons & stickers
Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats.


3- iconscout

iconscout home page

One of what I like the most about this site is the 3D icons, which are professionally made and varied in terms of styles.

Over 5.3 Million+ Design Assets
Curated SVGs, Vector Icons, Illustrations, 3D graphics, and Lottie Animations.
Over 7000+ new assets added every day. Integrated plugins, tools, editors, and more.

iconscout page

Work faster and Save time with Apps and Plugins:
IconScout has integrations with Figma, Adobe XD, Sketch, Illustrator, GSuite, and MS Office. Our plugins let you find assets without you leaving the tools you’re using.


4- google fonts

google fonts

I can't mention the word most famous sites without mentioning Google!!!

Simple, easy-to-use, variety, qualities we are used to from Google.

You may know this site because it is almost the largest site that people use to get fonts, but it also has a good set of icons.

Perhaps the experience of using it is the simplest for programmers, where all you need is to copy the code and it will work simply.


Are you bored? Don't worry, Let's end this list with an interesting site!!!

css animation meme

5- lordicon

lordicon

Although adding animation is usually not difficult, it adds a lot to any design.

And even if you're not going to use animated icons for some reason, when I look at them I get inspired.

Just add an animation to the Twitter icon on your site or add an entire animation. This site is for you.

Access 8,700+ Animated Icons
Lordicon is a powerful library of carefully crafted animated icons,
ready to use in digital products, presentations, or videos!


Conclusion:

Originally this article was about the top 10 sites and not the top 5 but why do I write an article once when I can write two articles.

Usually I prefer to talk about Dev topics more, so I would like to hear your opinions about the article.

  • What was missing?
  • Should I add more or fewer details?
  • Do I add more explanation or cut it out and only talk about the experience?

Author

Oldest comments (17)

Collapse
 
ymhaah profile image
Youssef Hafnawy

Wait for part 2

Collapse
 
coffiasd profile image
Ayden

Google icon sets is enough for most situations

Collapse
 
ymhaah profile image
Youssef Hafnawy

Indeed, in some cases, simply taking the font and the icon you need from one place and without any advertisement in order to subscribe to a paid service is a great thing.

Collapse
 
ymhaah profile image
Youssef Hafnawy

I should have written this in the article.

Collapse
 
ethand91 profile image
Ethan

Nice, thanks for all the recommendations :) had no idea lordicon existed!

Collapse
 
ymhaah profile image
Youssef Hafnawy

Glad you liked it, do you want a similar article about animation icon sites only

Collapse
 
rizkytegar profile image
🎉 Rizky Tegar Pratama

bootstrap icon

Collapse
 
longlongago profile image
longlongago
Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Thanks for the blog! It was nice to reading it.

Collapse
 
ymhaah profile image
Youssef Hafnawy

I'm glad you liked it

Collapse
 
jai_type profile image
Jai Sandhu
Collapse
 
delrocks profile image
Delroy Martins

Good write👌
Heroicons also deserves to be in this list

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Box Icons
boxicons.com/

Collapse
 
suyious profile image
Suyash K.

wow, simple icon was really cool

Collapse
 
brunoalves21 profile image
brunoalves21

Heroicons all the way
heroicons.com/

Collapse
 
nawam727 profile image
Nawam Sahasra Mandara Denawakage

I'm delighted about this post and hope to try these out

Collapse
 
chipzstar profile image
Chisom Oguibe

Tabler Icons deserves to be on this list in my opinion. But I like the selection. lordicon is new to me and looks great for animated icons!