Top 5 Icon websites for devs and designers!!!
Tags: design, beginners, webdev, productivity
Published: 2022-11-05 19:01:02

## 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](https://github.com/simple-icons/simple-icons) 

---

## [Material Icon Theme](https://github.com/PKief/vscode-material-icon-theme)

![material icon github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak0gfc8ur1sx2bewilpb.jpeg)

- You can also see [Material Icon Theme](https://github.com/PKief/vscode-material-icon-theme) Yes, the famous VsCode extension also has an open source GitHub repo.


---

## [Streamline](https://www.streamlinehq.com/)

![Streamline home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzd83h1lng8rocxwy9p0.jpeg)

- [Streamline](https://www.streamlinehq.com/) 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](https://fontawesome.com/)

![fontawesome home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esssljt72iydwh9hl0pf.jpeg)

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>
```
You can modify the shape and color of the icon and even add animation to it.

![fontawesome home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgzk9sywgdpjxevijxps.jpeg)

> 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](https://www.flaticon.com/)


![flaticon home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfz6iln57w9xid4pgb7r.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aatrmhxd11ysxfuxa8h.jpeg)

> 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](https://iconscout.com/)


![iconscout home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqjqfz9ey3k2j8w4sogc.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9dgl5qex2qx3optjkgg.jpeg)

> 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](https://fonts.google.com/icons)


![google fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/befvedt1saarhcnxf8x3.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f46l9pyvpjdkwc9rb4fm.gif)

## [5- lordicon](https://lordicon.com/)

![lordicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zchzl7r56fep85fsshdr.jpeg)

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

- professional links:
    - [Twitter](https://twitter.com/hafanwi)
    - [LinkedIn](https://www.linkedin.com/in/youssef-hafnawy/)
    - [GitHub](https://github.com/ymhaah)
- Hire me:
    - [UpWork](https://www.upwork.com/services/product/development-it-a-custom-and-responsive-websites-in-wordpress-1577236892828233728?ref=project_share)
    - [Freelancer](https://freelancer.com/u/ymhaah)
- Blog:
    - [HashNode](https://hafnawi.hashnode.dev/)
    - [Dev.to](https://dev.to/ymhaah)