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

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

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 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

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

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.io

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 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 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.

If you want to read more such articles you can check out some article links below and I will see you in another amazing post 👋.

• 9 Websites that all web developers should follow.
• React.js Example Project that you can build as a Beginner