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 :
- Heroicons
- Iconscout/unicons
- Feather Icons
- Material Icons by google
- Font Awesome Icons
- Flaticons
- Freeicons
- icons8.com
- Material UI Icons
Heroicons
Heroicon 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:
- Solid Variant
- 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 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:
- Line
- Monochrome
- Solid
- 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:
- Outlined
- Filled
- Rounded
- Sharp
- Two-tone
Font Awesome Icons
Fontawesome 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:
- Solid
- Regular
- Light
- Thin
- Duotone
Flaticons
Flaticon.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:
- Regular
- Bold
- Solid
These three variants come with two style options rounded strokes or straight.
Freeicons
Freeicons .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:
- 3D
- Badge
- Blue Line
- Cartoon
- Duo-Tone
- Filled outline
- Flat
- Glyph
- Gradient
- Gradient Glyph
- Handdrawn
- Long Shadow
- Outline
- Photorealistic
- Pixel
- Smooth
- Solid
Icons8
Icons8 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 :
- 3D Illustrations
- Stock photo & 3D textures design
- AI-powered Face generator
- 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 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:
- Filled
- Outline
- Rounded
- Two-tone
- 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 :
- Heroicons
- Iconscout/unicons
- Feather Icons
- Material Icons by google
- Font Awesome Icons
- Flaticons
- Freeicons
- icons8
- 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: