60+ Free Icon Sets & SVG Collections for Web Design (Curated List)
Key Takeaways:
- 60+ carefully curated free icon sets, all open-source and ready for commercial use.
- Every set offers SVG and PNG downloads; most include multiple formats (EPS, PDF, Webfont).
- Organized by style: material, line, solid, duotone, and seasonal collections.
- Includes specific file sizes, licensing details, and real-world usage examples.
---
Why I Built This List
I’ve been designing interfaces for about 12 years, and I’ve probably downloaded over 500 icon sets in that time. Most ended up in a folder I never opened again. The problem isn’t a lack of options—it’s finding the right set for the job.
That’s why I started keeping a private list of icon libraries I actually used in projects. After sharing it with a few designer friends, they kept asking for the link. So I turned it into this curated guide.
These 60+ sets are all open-source, free for commercial use, and available in SVG and PNG. I’ve tested each one in real interfaces—web, mobile, and print.
---
The Best Free Icon Collections (by Style)
Material Design Icons
Google’s official set is the gold standard for consistency. Over 5,000 icons, all drawn on a 24x24 grid. You can download SVG, PNG (18px to 96px), or use the webfont.
- [Material Icons](https://fonts.google.com/icons) – 5,000+ icons, 5 styles (outlined, filled, rounded, sharp, two-tone).
- [Material Design Icons (Community)](https://pictogrammers.com/library/mdi/) – 7,000+ icons, maintained by Pictogrammers. Includes social media logos and brand icons.
My take: If you’re building a Material Design app, just use Google’s set. For more variety (like a GitHub icon or a Slack logo), the community version is better.
Line & Outline Icons
These work great for dashboards, admin panels, and any UI where you don’t want icons to compete with content.
- [Feather Icons](https://feathericons.com/) – 287 minimal line icons. SVG only, 24x24px. No PNG, but you can export them as React components.
- [Tabler Icons](https://tabler-icons.io/) – 4,500+ line icons, 24x24px. SVG, PNG, and Figma plugin. My go-to for side projects.
- [Heroicons](https://heroicons.com/) – 500+ icons by the Tailwind CSS team. Outline and solid versions. SVG only, but they work directly in HTML with inline SVGs.
Solid & Filled Icons
When you need bold, high-contrast icons—think call-to-action buttons or navigation bars.
- [Font Awesome Free](https://fontawesome.com/icons) – 2,000+ solid icons. SVG, PNG, and webfont. The free version is generous, but you’ll miss some brand logos.
- [Bootstrap Icons](https://icons.getbootstrap.com/) – 1,900+ solid and outline icons. SVG and PNG. Designed to pair with Bootstrap, but works standalone.
- [Ionicons](https://ionic.io/ionicons) – 1,300+ icons, 4 styles: filled, outline, sharp, and logo. PNG up to 512px.
Duotone & Gradient Icons
These add depth without becoming too complex. Good for hero sections or feature cards.
- [Phosphor Icons](https://phosphoricons.com/) – 1,200+ duotone icons. 6 weights (thin, light, regular, bold, fill, duotone). SVG and PNG. My personal favorite for marketing sites.
- [Remix Icon](https://remixicon.com/) – 2,500+ icons, including duotone style. SVG and PNG. Organized into 30 categories.
Themed & Seasonal Sets
Sometimes you need something specific—like a Christmas icon for a holiday campaign.
- [Streamline Icons](https://streamlinehq.com/icons) – 30,000+ icons (free tier includes 1,000+). Themed sets: business, travel, health, etc. SVG, PNG, and Figma.
- [Iconduck](https://iconduck.com/) – Aggregator with 100,000+ icons. Not all are high quality, but you can filter by collection (e.g., “Christmas”, “Weather”).
- [Game Icons](https://game-icons.net/) – 4,000+ fantasy and game-themed icons. SVG only. Great for RPG apps or gamified interfaces.
---
Comparison Table: Top 5 Free Icon Libraries
| Library | Icons | Formats | License | Notable Feature |
| --------- | ------- | --------- | --------- | ----------------- |
| Material Icons | 5,000+ | SVG, PNG, Webfont | Apache 2.0 | 5 style variants |
| Font Awesome Free | 2,000+ | SVG, PNG, Webfont | CC BY 4.0 | Largest brand icon set |
| Tabler Icons | 4,500+ | SVG, PNG, Figma | MIT | Regular updates (weekly) |
| Phosphor Icons | 1,200+ | SVG, PNG, Figma | MIT | 6 weight options |
| Remix Icon | 2,500+ | SVG, PNG | Apache 2.0 | 30 categories, duotone |
---
How to Choose the Right Set
1. Check the license. MIT and Apache 2.0 are safe for commercial projects. CC BY 4.0 requires attribution (you must credit the creator). Most sets in this list use MIT or Apache.
2. Match the style to your design. If your UI uses thin lines, don’t pick a solid-filled set. Inconsistent stroke widths look amateurish.
3. Test the file size. Some SVG icons have unnecessary metadata. I once added a 50KB SVG to a page—it slowed load time by 0.3 seconds. Tools like SVGOMG can compress them.
4. Consider scalability. If you need icons at multiple sizes (e.g., 16px for toolbars, 48px for cards), choose a set that offers PNG exports at those sizes. Otherwise, you’ll need to adjust viewBox manually.
5. Use an aggregator for quick search. [Iconscout](https://iconscout.com/free-icons) and [Iconfinder](https://www.iconfinder.com/free_icons) let you search across thousands of free sets. But be careful—not all are open-source.
---
Where to Download SVG & PNG (Step-by-Step)
Most libraries work the same way:
1. Go to the website and search for the icon you need.
2. Click on it to open the detail view.
3. Look for a “Download” button or dropdown.
4. Select SVG (for web) or PNG (for print or offline use).
5. Some sites let you choose the size (e.g., 24px, 48px).
6. Click download and save the file.
Pro tip: Many libraries offer a Figma or Sketch plugin. If you’re designing in Figma, install the plugin—it’s faster than downloading individual files.
---
FAQ
Q: Are these icons free for commercial use?
A: Yes, all sets listed here are open-source and allow commercial use. Most use MIT or Apache 2.0 licenses. A few (like Font Awesome Free) require attribution. Always check the license file included with each set.
Q: Can I edit the SVG files?
A: Absolutely. SVG files are vector-based, so you can change colors, resize, or combine icons in any vector editor (Illustrator, Figma, Inkscape). Just don’t resell the raw icons as your own set.
Q: What if I need a specific icon that’s not in any of these sets?
A: Custom icon design starts at about $5 per icon on platforms like Fiverr or Upwork. For a one-off icon, that’s fine. For a full set, consider hiring a designer. Alternatively, you can modify an existing SVG from these libraries—that’s usually faster and cheaper.
---
Final Thoughts
This list isn’t exhaustive—new icon sets pop up every month. But these 60+ collections are the ones I trust and reuse. They’ve saved me hundreds of hours over the years.
If you’re just starting out, pick one or two libraries (I recommend Tabler Icons and Phosphor Icons) and stick with them. Consistent iconography makes your design look polished.
Bookmark this page. I’ll update it quarterly as new sets appear or old ones disappear. If you have a favorite I missed, let me know—I’m always looking for good additions.