DEV Community

Cover image for Top 5 Best Javascript Icons Libraries ๐Ÿš€
Ram Maheshwari โ™พ๏ธ
Ram Maheshwari โ™พ๏ธ

Posted on • Updated on

Top 5 Best Javascript Icons Libraries ๐Ÿš€

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

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

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

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

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

CSS.gg

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 ๐Ÿ‘จโ€๐Ÿ’ป

Image description

๐Ÿ‘จโ€๐Ÿ’ผ My Linkedin

๐Ÿฆ My Twitter

๐ŸŒ My Website


Press the Follow button to stay updated with my content ๐Ÿš€

Thanks for Reading โค๏ธ

Top comments (35)

Collapse
 
liftoffstudios profile image
Liftoff Studios

You literally forgot Fontawesome and google material icons ๐Ÿ˜†
Great article though

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

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.

Collapse
 
liftoffstudios profile image
Liftoff Studios

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 ๐Ÿ˜†

Thread Thread
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ • Edited

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.

Collapse
 
guillaumebern profile image
Guillaume Bernier

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.

Collapse
 
hacker4world profile image
hacker4world

If you use react i suggest a library called react-icons it is really good

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ • Edited

Wow, thanks a lot for sharing that, I will check it out ๐Ÿ’ฏ

Collapse
 
mykezero profile image
Mykezero

The power of all fonts at your finger tips! Just can't be beat!!

Collapse
 
codewithyaku profile image
CodeWithYaku

Thanks for this I'm basically tired of Google icons and Fontawsome although they both good ๐Ÿ˜…

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

No problem, Thank you so much for sharing your feedback ๐Ÿ’ฏ

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Thanks a lot for putting this together.
I have been so addicted using font awesome that I forget other icon libraries exist.

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

Thank you so much, @elijahtrillionz, for sharing your feedback. I'm glad that you found this post to be helpful

Collapse
 
andrewbaisden profile image
Andrew Baisden

Some really good ones in this list.

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

Thanks a lot, @andrewbaisden, for sharing your feedback. I'm glad that you liked this list ๐Ÿ’ฏ

Collapse
 
leandro070 profile image
Leandro Gutierrez

You can use Lucide instead of Feather icons :) Lucide is a fork with more icons

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

That sounds good, I will check it out, Thanks a lot for sharing it ๐Ÿ’ฏ

Collapse
 
amhernandez profile image
A.M. Hernandez

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!

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

That sounds great, @amhernandez, I'm happy that you found this post to be helpful, Thanks for sharing your feedback ๐Ÿ’ฏ

Collapse
 
nirav97120 profile image
Nirav Prajapati

Bro it's awesome

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

Glad you liked it, Thanks a lot for sharing your feedback ๐Ÿ’ฏ

Collapse
 
neoprint3d profile image
Drew Ronsman

React icons mixes some icon libraries together

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

That sounds good, @neoprint3d, Thanks a lot for sharing that ๐Ÿ’ฏ

Collapse
 
coderlifeisawesome profile image
lifeascoder

Very helpful sir. Thank you for the information. From Kerala

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

No problem, @gauthamsudo , I'm glad you liked it. BTW, Kerala is beautiful โค๏ธ

Collapse
 
kazi94 profile image
__KaziWhiteSalafiDev

Thanks for sharing, we are so constantly habitued by using fontawesome and google fonts that we forget there is outhere some other great icons

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

Thanks a lot, @kazi94, for sharing your feedback. I'm glad that you find it helpful ๐Ÿ’ฏ

Collapse
 
scalaadeveloper profile image
Scalaadeveloper

thank you

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

No problem, @scalaadeveloper, Thanks a lot for taking the time to share your feedback ๐Ÿ’ฏ

Collapse
 
lexpeee profile image
Elex

There's also @material-ui/icons btw. :D
Good read btw

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

That's great to hear, @lexpeee, I will check it out, Thank you so much for sharing that ๐Ÿ’ฏ

Collapse
 
soniarpit profile image
Arpit

Boxicons is cool... currently using it

Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

Yeah, Boxicons is amazing, Thanks a lot for sharing that ๐Ÿ’ฏ

Collapse
 
stf05 profile image
Sacha STAFYNIAK
Collapse
 
rammcodes profile image
Ram Maheshwari โ™พ๏ธ

That looks like a great and very helpful resource, Thanks a lot for sharing it ๐Ÿ’ฏ