Icons are an essential part of any website, you'll need them to illustrate your point better, give more personality to your app or make it easy to navigate your website, especially on mobile devices when some words might be too long and an icon fits much better.
In this article, I compiled what I considered the 10 best free icon packs, for both developers and designers to use, some of them have options to import to different formats, like png or svg, and some of them you can install them and import them directly into your projects, which makes them much more convenient if you are working with a framework like React.
Let's begin!
Heroicons
Made by the team behind Tailwind CSS, and more specifically by Steve Schoger.
Pros:
- Export to SVG/JSX.
- Outline/Solid versions available.
- Very modern designs.
- React and Vue library available for easy imports.
Cons:
- No social icons.
- Only 230 icons total.
Check Heroicons here.
Simple Icons
Thousands of free SVG icons for popular brands (and not so popular). If you need an icon for any brand or service, this is the place to go, they are really easy to use, they have packages for many different frameworks and languages and one distintive thing they do is that they give you the main brand color of the icon.
Pros:
- Export to SVG/PDF.
- Brand color of the icon.
- Use by CDN, NPM package, or Framework/Language-specific packages.
Cons:
- Only con is that it's so good that I wish that it had common icons so I wouldn't need to use anything else.
Check Simple Icons here.
Bootstrap Icons
Built by Twitter, one of the most extensive packs with over 1300 icons, they have a real personality that you might or might not like, but the collection is very complete.
Pros:
- Export to SVG or use as a font.
- Outline/Solid versions available.
- NPM package available.
- Main social icons available.
Cons:
- No React or Vue library.
- Some social icons missing.
Check Bootstrap Icons here.
Ionicons
Built by the team behind Ionic, it's an icon pack designed for mobile devices and apps, it's probably what you want to use in an Ionic application, but you can also export to SVG to use it in any project.
Pros:
- Export to SVG.
- Outline/Solid/Sharp versions available.
- Main social icons available.
Cons:
- Small collection.
Check Ionicons here.
Octicons
Built by GitHub, used to emphasize meaning, not replace entire words (no menu icon for example). The biggest advantage of this one is the many different packages that they offer for Ruby, Rails, Jekyll, JavaScript and React.
Pros:
- Export to SVG/PDF.
- Good documentation with UI examples on how to use.
- Many different packages.
Cons:
- Outline/Solid versions only for some icons.
- Small collection.
- No social icons.
- Some common icons like hamburger menu are missing.
Check Octicons here.
Ant Design Icons
Built for React, no export to SVG available, the only way to use them is to install the package and import them into your project. It also offers a Two-Tone version of the icons, which is rare and it looks great.
Pros:
- Outline/Filled/Two-tone versions available.
- Really easy to add custom icons with their
<Icon />component. - Some attributes available like rotate/spin to customize your icons or create loading icons.
Cons:
- Only available for React.
- Small collection.
Check Ant Design Icons here.
Feather Icons
Built by Cole Bemis, my favorite part is that you can customize the size, the stroke width, and the color before exporting the icon as SVG.
Pros:
- Easy customization.
- Export to SVG.
- Main social icons.
Cons:
- Only 286 icons available.
Check Feather Icons here.
Material Design Icons
Also called Google Fonts Icons, it's built by Google. This one is really complete, with a lot of icons, you can customize the density, the size, and the color directly on the page. You can use it as an Icon font too, and if you are using Angular, it's the best choice by far. It also has easy instructions on how to use the icons in Android, iOS, and Flutter.
Pros:
- Easy customization.
- Export to SVG/PNG or use it as a font.
- Big collection.
- Outlined, Filled, Rounded, Sharp, and Two-tone versions available.
Cons:
- No social icons.
- Color customization is only black/white.
Check Material Design Icons here.
Entypo
Built by Daniel Bruce, more than 400 icons. More of an enterprise look than a modern look, but sometimes that's exactly what you need!
Pros:
- Simple designs.
- A lot of personality.
- React library available.
Cons:
- Not many icons.
- It hasn't been updated in a bit, some social icons are outdated.
- No button to export to SVG, you have to right-click and save it yourself.
Check Entypo here.
Fontisto
If you were looking for Font Awesome on this list, you are not going to find it, Fontisto is just a superior version. It's CSS-based, it offers an npm package to install it. It offers a lot of customization, you can add borders or background to your icons, animate them, flip them or rotate them. Super easy to create loading icons.
Pros:
- CSS-based.
- Easy customization.
- Very good loading icons.
- Main social icons available.
Cons:
- No SVG export.
- A little harder to implement than other solutions.
Check Fontisto here.
Final thoughts
You reached the end of the article! This article was inspired by a Twitter Thread I created some months ago, you can check it out here. I post daily content on Twitter so if you have enjoyed this, consider following me @nachoiacovino.
If you have any suggestions to improve this list, don't hesitate to contact me on Twitter, I'll be happy to improve this list over time.
See you on the next one!
This article was originally published on my personal blog, nachoiacovino.com
Top comments (0)