April 17, 2024
The Top Icon Sets for Web Developers
Justin Golden
Top 4
Font Awesome
https://fontawesome.com/search
Font Awesome has 30,000+ icons, and all are consistent and look great. They have plenty of styles to choose from, such as solid, regular, light, thin, duotone, and they have plenty of brands and other icons. Many are available for free, but many more are available in their paid plan. This is one of the older and more well known sets, and is used widely across the web, and the devs really seem to care.
You can use the CDN, use font files, or install the node module in your project. Note: if you have the paid version and use the node module, remember to hide your secret API token in an env file, and do not push it to your repo or share it anywhere that people online can see it.
If you’re making a big project and want an icon library, or want to pick one and use it for everything, Font Awesome is the way to go. If you only need a few icons and want to keep it simple, you can consider Hero Icons and Feather Icons below:
Hero Icons
From the makers of Tailwind CSS, these super clean and simple icons are super easy to use and 100% free. These are often my go to icons, and they’ve got all the basics covered, but they’re missing brands and some other icons. These icons come in a 16,20,24px and as solid or outline, and they’re MIT licensed and open source. They’ve got 288 icons.
Feather Icons
These icons are also well designed and the stroke style and 24px works well to complement Hero Icons. They’ve got 287 icons and I like the look and feel and ease of use. You can also adjust size, stroke width, and color from the side bar.
The .dev site also has more brands and some payment options. Go here for payment based icons.
Iconoir
These icons also look great, and unlike Hero and Feather, they’ve got a lot of icons (1573 at time of writing). They work well to fill in gaps for Hero and Feather as well, since they are stroke icons on 24x24 viewBox, have lots of options, and they’re MIT license.
These icons have a simpler, playful style, but they will work well for almost any use case in my opinion.
Next Best
Zest Icons
Zest Icons are quite pretty, and they’ve got 200 free icons (MIT license) and 663 total if you pay $35. They’ve also got plenty of social media icons, all of which are free, in a simple outline style. To use them, you have to download them all, and fill out a form with your email. They’ve got a few basic icons for things like drawing, travel, food, sports, and will generally get the job done. The icon style is very friendly, cozy and simple.
Basic Icons XYZ
Basic Icons includes 326 stroke icons, which will be perfectly fine for most use cases. They’ve got an npm package, buttons to quick copy and download, and a few size and stroke options. They’re free and there are no steps required to download all other than just clicking the download button.
Akar Icons
This website feels a little clunkier to use, probably just because the icons take up so much real estate, but they’ve got 434 icons, many stroke and some fill, and will work well for any basic UI. They have some unique ones too, and they have a cool style (see the chess icon, the scissor icon, the bank icon, etc.). They have a lot of tech based icons, for things like HTML, CSS, JS, PHP, Python, React, Vue, Angular, VS Code, Sass, npm, TS, Git, Redux, Graph QL, Yarn, jQuery, Bootstrap. They also have some socials such as Facebook, Twitter, Instagram, YouTube, etc. and some other popular sites like Figma, Slack, Stackoverflow if you need these brands in a consistent icon style.
Akar icons is a good option for UIs and they’ve also got many brands.
Eva Icons
https://akveo.github.io/eva-icons/
These come in stroke and fill, there are 244 icons per style, and I have to say, they look quite nice. They’ve got more than what you need for most user interfaces, but they do lack brand icons (as many of the sets listed above do). These icons have quiick download buttons for SVG as well as PNG. You can also download them all (3.5mb zipped) which includes SVG and PNG of both fill and outline.
Fa Icons
These icons are smaller and probably work better on smaller elements, and they’ve got over 2000 icons. They also have many, many brands to choose from.
Iconic App
There are many icons here, but sadly only 200 for free. Still, these icons look quite nice, and pro gets you 1128 icons, and they’ve got plenty of categories. Click the “Free” tab on the left and see if these icons will work for you. I think you’ll probably want pro, or to go with another set, but they do have some unique ones.
Icon SVG XYZ
I don’t know what’s up with the xyz domain and icon sets…
Anyway, these icons are quite nice, and while they don’t have a ton, they have a ton of the ones that you need. They’ve got you covered in the arrows department, and they have plenty of options for media, files, editors, and users, but not many others. I think these icons work quite well for most UIs, where you don’t need some super odd icon, and just need basic icons for the common things in your interface. They’ve got a few brand logos, in base style, square, and circle, and you can get tritone icons for a reasonable $6. They’ve also got a few config options for icon size, stroke width, color, as well as ends and joins which is nice.
IcoMoon
These icons have a unique style with some having variable width strokes and having different widths in different elements. I can’t say I’m personally a fan, but to each their own. They let you select multiple icons and generate a font, which is neat.
System UI Icons
These super small, super minimal, super consistent icons are designs for products and systems. You can copy or download the SVG, or copy the CDN link. Select one of those three options on top, and then click the icon you want to copy/download. There’s also the option to download all, and you are free to use them how you want, and download all icons as well.
I find these super small icons quite charming, and can certainly see the use cases.
Teeny Icons
Another micro sized icon set (in terms of the icon sizes, not the number available). Click to copy the icon, and they support outline and solid. MIT license.
Jam Icons
You’ll be rocking with this set of over 940 icons. The icons look quite nice, and they have outline and fill available, and a lot of social icons, and a lot of media player and text editor options. Simply click to copy or download. I’m not sure why the viewBox starts at -2,-2 on all icons, and why the width is set to 28 by default but not the height, but these can of course be edited.
Ionic
There are three styles: outline, filled, and sharp filled (no rounded edges). These icfons are open course and MIT license, and built by Ionic, which is a UI toolkit for cross platform apps. They also thankfully have a lot of logos you can use, although the logos are all generally fill and I really like their stroke icons.
Google Material Icons
https://fonts.google.com/icons
Google has a LOT of icons, and they do look quite nice, and they make it easy to use. These icons will also have your app or website feeling native for most Android users, and will look good in any app. They have a lot of icons for operating system type things (of course) such as text or photo editing, media playback, payments, etc.
IBM UI Icons
https://www.ibm.com/design/language/iconography/ui-icons/library/
IBM recently came out with a brand new design system, and they’ve made it available for everyone to use. These icons are both industrial and yet clean. They’re somehow rigid and still friendly, professional and still casual. It’s not the look for everyone, but they have many icons, including many for tech related things such as data, cloud, AI, files, and IBM related products, but they also have all the normal icons you need like arrows and such. They have a little over 20 social icons, which is probably good enough to get by for what you need. I believe they call these icons Carbon icons, and they also have a typeface called Plex that is part of their rebrand you can check out as well.
List of Icons
https://icon-sets.iconify.design/
You can visit the site above to see a list of many different icon sets.
Conclusion
There are a lot of icon sets to choose from. My advice is to not mix and match, unless the styles are nearly the same, and ensure that the stroke widths and corners/edges are at least consistent if you have to mix and match. Font Awesome is the overall pick for most available for free and best for paid and for all projects, but there are plenty of alternatives, and a lot of “click and copy” websites with lots of pretty icons.
Also check out The Top Vector Illustration Websites
More Blog Articles