Free and open-source SVG icon resources for your next project
There are times when you may want to use SVG icons in your web application. For example, you may want to use SVG icons for your navigation menu or buttons.
I’m going to list down some of the best open-source and free SVG icon resources that you can use for your next project I have collected over the years. It’s a growing list that I’m constantly updating everytime I find a new resource that I think is worth sharing.
-
SVGRepo — SVGRepo is a great icon resource where you can find a wide range of SVG icons. You can search for icons by name or by category. The icons are available in mono-color and multicolor formats. One of my go-to resources to find swell icons.
-
Icons8 — Icons8 offers a vast collection of customizable SVG icons in various styles and themes. You can easily adjust the size, color, and stroke to fit your design needs. With both free and premium options, Icons8 provides an intuitive interface to search and filter icons. Its integration with design tools like Figma and Adobe XD makes it a versatile resource for modern web projects.
-
Mono Icons — Mono Icons is a free and open-source SVG icon set that you can use in your web projects. The icons can be downloaded individually or use the CDN. You can also download the icons in a single ZIP file.
-
IconDuck — Similar to SVGRepo, IconDuck is another great resource to find SVG icons. The icons are sorted by different collections and you can also search for icons by name. The icons are available in SVG as well as PNG format. The collection has over 200,000 icons.
-
Phosphor — Phosphor is a nice collection of SVG icons that can be tweaked to your liking. The fonts can be configured based on thin, light, regular, bold, and fill lines. You can also change the color and size of the icons.
-
Remix Icon — The collection has over 2000 icons that are categorized into different categories. The icons are available in SVG, PNG, and Webfont formats. You can also download the icons in a single ZIP file.
-
Feather Icons — Feather Icons is a collection of 280+ open-source SVG icons that you can use in your web projects. The icons are available in SVG, PNG, and Webfont formats. The good thing about this icon collection is they are configurable. You can change the color, size, and stroke of the icons as per your need.
-
iconic — This is a collection of icons that has a freemium model. There are over 200 free icons and around 800+ premium icons that you can purchase and use in your projects. The icons are available in SVG format.
-
Heroicons — Heroicons is a collection of 300+ open-source SVG icons by the Tailwind team that you can use in your web projects. The cool thing about this collection is it comes with a first-party React component library that you can use to render the icons in your React app. It’s available for Vue as well.
-
Radix Icons — Last but not the least. Radix Icons is another collection of 15x15 SVG icons where the icons are neatly categorized into different categories such as design, objects, abstract, typography, and so on. The icons are also available in a React component library that you can use in your React app.
-
SVGDoodles - Not really a collection of SVG icons but a collection of SVG doodles that you can use in your web projects. These doodles are perfect to add some amount of playfulness to your websites.
-
Shapes - Again, these are similar to SVGDoodles but these are like more refined shapes that you can use in your web projects. These shapes are gradient-y and can be used to create some cool effects.
-
SVG Files by Pixelied - This is a collection of SVG files that you can use in your web projects. The collection has some fancy-looking SVG files (vectors and designs) that you can use to give your website a unique look.
-
Isocons - If you’ve ever needed to use isometric icons in your projects, look no further than Isocons. They have hundreds of isometric icons from numerical and alphabetical symbols to geometric shapes that you can use in your projects. You can also customize various aspects of the icons stroke, size, fill color, etc. before downloading them.
Honourable mention…
- Icons by Raycast — Sometime you might not want to use the SVG icons as is. For instance, when you want to create a logo for your web/mobile app, you might want to use icons as a part of the logo. In such cases, you can use the Icons by Raycast. It’s a web interface where you can design your own logo using SVG icons. And trust me, the logos that you can create using this web app are pretty awesome!
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
