Video Version ๐น :
Note: If you find this video to be helpful then please show me some love by liking the video and by subscribing to my Youtube channel ๐
Almost every Website and App uses icons to display information or indictate some kind of action. It's hard to imagine building any website/app without making use of such icons โ
In this article, I'm sharing with you the Top 5 Best JavaScript Icons Libraries which you can make use of while building your own projects ๐
Although, there are many other articles that cover the top 10 or the top 20 libraries but I decided to share the Top 5 best libraries without confusing you too much by giving you too many options ๐ฏ
These 5 Libraries are probably the best ones out there and I have used them personally myself in my own projects ๐
1) Feathericons
Feathericons is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility ๐ป
Features โก
- Opensource ( Free to use ) ๐ฅณ
- Available as NPM package ๐ฆ
- Available as CDN ๐ถ
- Beautifully crafted icons ๐จ
2) Ionicons
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the same people who created the popular Angular tool called Ionic ๐ฅณ
Features โก
- Opensource ( Free to use ) ๐ฅณ
- Available as NPM package ๐ฆ
- Available as CDN ๐ถ
- Beautifully crafted icons ๐จ
- Has Different variations like Outline, Filled, Sharp ๐คฏ
3) Boxicons
Simple Open Source icons carefully crafted for designers & developers ๐จโ๐ป
Features โก
- Opensource ( Free to use ) ๐ฅณ
- Available as NPM package ๐ฆ
- Available as CDN ๐ถ
- Beautifully crafted icons ๐จ
- Includes Different variations like Regular and Solid ๐คฏ
4) Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS ๐ฅ
Features โก
- Opensource ( Free to use ) ๐ฅณ
- Available as NPM package ๐ฆ
- Available as click to copy SVG ๐ฑ๏ธ
- Beautifully crafted icons ๐จ
- Strong Community ๐ซ
5) CSS Icons
Open-source icons made purely using CSS but also support different formats like SVG, Figma, etc. If you are looking to build a fast website then it's the best library that you can use as the icons are made using CSS so it will get loaded right away without the browser having to make any additional request just to load the icons โ๏ธ
Features โก
- Opensource ( Free to use ) ๐ฅณ
- Available as NPM package ๐ฆ
- Available as CDN ๐ถ
- Beautifully crafted icons ๐จ
- Icons are made purely using CSS so that will boost the performance of your project ๐
So, that covers our list of the Top 5 Best JavaScript Icons Libraries
Now, do me a favour by Reacting to this post with
โค๏ธ + ๐ฆ and also bookmark ๐ it for your future reference.
One Last Request: Please make sure to subscribe to my recently started Youtube channel as that will be the best way you can support me in my journey ๐
Connect/Follow me on these Social platforms where I regularly post Tips๐ก+ Guides๐ + Resources ๐ related to Web Development and Programming ๐จโ๐ป
๐จโ๐ผ My Linkedin
๐ฆ My Twitter
๐ My Website
Press the Follow button to stay updated with my content ๐
Thanks for Reading โค๏ธ
Top comments (35)
You literally forgot Fontawesome and google material icons ๐
Great article though
Thanks a lot for sharing your feedback, @liftoffstudios . Font awesome and material icons are great and very popular. I just feel like they are very commonly used among websites and that's why so many websites end up having the same type of icons and which makes the site less unique.
Also, from my personal experience, I can say, The UI built using the libraries mentioned above looks better than the one built with the same old Font Awesome/Material icons.
Ok ,I understand your point :)
The reason I was telling was that these are the most popular and hence would have more icons than the sites you mentioned (material icons is an exception to this though)
I have one opinion though, heroicons is style wise not as good as font-awesome and material icons ๐
I guess you're right, I use heroicons mostly when I want to use icons for some quick purpose as you can directly copy the svg code of any icon and start using it when you land on the heroicons page without having to first install their npm package or cdn. That makes heroicons special and time saver ๐ whereas in FontAwesome, you will first have to do some verification like submitting your email and all that kind of stuff before you can start using the icons.
My partner and I just released a brand new open source icon library that works with different frameworks like React, Vue and Svelte. You can find additional features on Circum Icons to make the integration easier, like building arrays, copy individual component tag, etc.
If you want something more unique and less popular! ๐
Let me know if you have any suggestions or improvements that we should do.
If you use react i suggest a library called react-icons it is really good
Wow, thanks a lot for sharing that, I will check it out ๐ฏ
The power of all fonts at your finger tips! Just can't be beat!!
Thanks for this I'm basically tired of Google icons and Fontawsome although they both good ๐
No problem, Thank you so much for sharing your feedback ๐ฏ
Thanks a lot for putting this together.
I have been so addicted using font awesome that I forget other icon libraries exist.
Thank you so much, @elijahtrillionz, for sharing your feedback. I'm glad that you found this post to be helpful
Some really good ones in this list.
Thanks a lot, @andrewbaisden, for sharing your feedback. I'm glad that you liked this list ๐ฏ
You can use Lucide instead of Feather icons :) Lucide is a fork with more icons
That sounds good, I will check it out, Thanks a lot for sharing it ๐ฏ
Thank you for this post, it is very helpful. I will be checking these out as I haven't yet heard of most of the ones you have presented, and they look promising. Thanks again!
That sounds great, @amhernandez, I'm happy that you found this post to be helpful, Thanks for sharing your feedback ๐ฏ
Bro it's awesome
Glad you liked it, Thanks a lot for sharing your feedback ๐ฏ
React icons mixes some icon libraries together
That sounds good, @neoprint3d, Thanks a lot for sharing that ๐ฏ
Very helpful sir. Thank you for the information. From Kerala
No problem, @gauthamsudo , I'm glad you liked it. BTW, Kerala is beautiful โค๏ธ