Vikas Rai
Nextjs Dev

Nextjs Dev

SVG Icons Libraries that you can use in react.js &next.js projects.

SVG Icons Libraries that you can use in react.js &next.js projects.

Vikas Rai's photo
Vikas Rai
·Apr 29, 2022·

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Heroicons
  • Iconscout/unicons
  • Feather Icons
  • Material Icons by Google
  • Font Awesome Icons
  • Flaticons
  • Freeicons
  • Icons8
  • Material UI Icons
  • Conclusion

Originally Published at Nextjsdev.com

Hello everyone, I hope you all are doing well. In this post, I have mentioned some useful free SVG Icons resources which you can download or can use directly in your web development projects.

Many times it happens that you need some kind of Icon, that you can use in your web projects to design the UI of your website, but you may not find the right one that you are looking for.

Here, I have curated a list of some free SVG icons websites, that you can check whenever you need them. These are some of the websites that I came across while I was finding some good SVG Icons.

So, I thought to share these amazing resources with all of you.

Here is the list of those websites :

  1. Heroicons
  2. Iconscout/unicons
  3. Feather Icons
  4. Material Icons by google
  5. Font Awesome Icons
  6. Flaticons
  7. Freeicons
  8. icons8.com
  9. Material UI Icons

Heroicons

Heroicon logoHeroicon logo

So heroicons has a collection of 230 icons, which are beautifully handcrafted Svg Ions by the maker of Tailwind CSS. You can also get the Figma file for each of the icons if you want to edit or change the icon as per your need.

It comes with two different styles of Icons:

  1. Solid Variant
  2. Outline Variant

You can either download it and use it in an Html File as an SVG tag or you can use each icon as a component from an npm package.

Iconscout/unicons

Iconscout  logoIconscout logo

Iconscout is a very famous Design Resource Marketplace. It has not only Svg Icons but also Illustrations, 3D -Illustrations, Lottie Animations, and many more design resources.

It has a collection of over 4500+ icons, which is divided into 27 categories.

It has four different types of variants:

  1. Line
  2. Monochrome
  3. Solid
  4. Thin Line

But only the Line Variant is free.

Feather Icons

Feather icons are a collection of simple, beautiful, and open source icons. Every icon is designed on a 24x24 grid with an emphasis on flexibility and clean design.

It is a collection of 286 icons, and you can use them in different ways. You can either use it by downloading the npm package or you can load the script file from a CDN provider.

You can customize the icons on the website itself by changing size, stroke width, and color and download it as an SVG.

Material Icons by Google

This icons library is made by Google itself. Material Icons are available in five styles and a range of downloadable sizes and densities.

These icons are based on the core Material Design principles and metrics.

It has a pretty big collection of icons which is approximately 5000 covering 18 different categories.

It provides five different variants of icons:

  1. Outlined
  2. Filled
  3. Rounded
  4. Sharp
  5. Two-tone

Font Awesome Icons

Fontawesome logoFontawesome logo

It is the most popular and next generations web's favorite icons library and toolkit.

It has a big collection of 14729 icons in total with 5 different variants and having 66 different categories.

It has 5 different icons variants:

  1. Solid
  2. Regular
  3. Light
  4. Thin
  5. Duotone

Flaticons

Flaticon.com logoFlaticon.com logo

Flaticons has the largest database of icons available in PNG, SVG, PSD, EPS, and BASE 64 formats.

It has access over to 6.3M+ SVG icons and the best part is that each icon is available for free and it also has a good collection of Stickers.

It has three different variants:

  1. Regular
  2. Bold
  3. Solid

These three variants come with two style options rounded strokes or straight.

Freeicons

Freeicons .io logoFreeicons .io logo

Free icons have the largest database of free SVG icons. These icons come in 17 different styles.

It has a wide variety of high-quality icon that comes in different sizes, styles with PNG. SVG, EPS, and other formats.

These styles are:

  1. 3D
  2. Badge
  3. Blue Line
  4. Cartoon
  5. Duo-Tone
  6. Filled outline
  7. Flat
  8. Glyph
  9. Gradient
  10. Gradient Glyph
  11. Handdrawn
  12. Long Shadow
  13. Outline
  14. Photorealistic
  15. Pixel
  16. Smooth
  17. Solid

Icons8

Icons8 logoIcons8 logo

Icons8 is a pretty huge library consisting of not only SVG icons but also illustrations, photos, music, design tools, etc.

They have 33 different styles option for icons with design tools like :

  1. 3D Illustrations
  2. Stock photo & 3D textures design
  3. AI-powered Face generator
  4. AI-powered photo generator

And plenty more tools.

It is the best website that does not have icons only but also many tools and resources which can be helpful for your web projects.

Material UI Icons

Material Ui logoMaterial Ui logo

Material UI icons are designed by the team of Material UI, which is a CSS framework for React.js, Vue.js, and Angular.js.

It has a collection of 1900+ React-material icons which are ready to use. Just download the npm package @mui/icons-material and you are ready to use them in your React/Vue/Angular projects.

The icons come in five different styles:

  1. Filled
  2. Outline
  3. Rounded
  4. Two-tone
  5. Sharp

The MUI Icons are the same icons set by Google Material Icon.

The MUI just packaged those sets of icons into Components, so that they can be used in UI libraries like React/Vue as a component.

Conclusion

So that was the list of some of the best SVG Icons Libraries that you can use in your web projects.

Let me revise the list once again for you :

  1. Heroicons
  2. Iconscout/unicons
  3. Feather Icons
  4. Material Icons by google
  5. Font Awesome Icons
  6. Flaticons
  7. Freeicons
  8. icons8
  9. Material UI Icons

These are some of the best SVG Icons libraries, in my opinion, you may like or dislike them.

I hope you like this info regarding SVG Icons and if you have read till here, then thank you so much for your patience reading.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Connect with me:

  1. Twitter Link
  2. LinkedIn link
  3. Facebook Link
  4. Github Link

Did you find this article valuable?

Support Vikas Rai by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors