40+ Free Icon Sets & SVG Collections for Web and App Design
Key Takeaways
- Over 40 free icon sets are available with open-source licenses, suitable for commercial and personal projects
- SVG format offers scalability and small file sizes, while PNG provides easy compatibility with older browsers
- Most collections include multiple styles (outline, filled, duotone) and are regularly updated with new icons
- Always check the license: MIT, CC0, or Apache 2.0 are safest for commercial use
---
Why Free Icon Sets Matter for Design
I've been collecting icon sets for years, and I've seen how the right icon can make or break a user interface. A well-chosen set saves hours of custom illustration work and keeps your design consistent. But with thousands of options out there, you need a reliable list—not just a random Google search.
After testing and using dozens of libraries, I’ve narrowed down the best free icon sets that offer SVG and PNG downloads. These are open-source, regularly maintained, and cover everything from simple web icons to complex app interfaces.
What to Look for in a Free Icon Set
Not all free icons are created equal. Here's what I prioritize:
- License clarity: MIT, CC0, or Apache 2.0 let you use icons in commercial projects without attribution (though attribution is appreciated)
- Format support: SVG for scaling, PNG for fallback in email or legacy systems
- Consistency: Same stroke width, corner radius, and visual weight across the set
- Updates: Active projects get new icons and bug fixes
- Searchability: A good search or filter system saves time
Top Free Icon Sets & SVG Collections
1. Lucide
Originally forked from Feather Icons, Lucide now has over 1,000 icons. Each icon is a single SVG path, making them lightweight and easy to customize. They offer outline and filled styles, and the library is available as npm package or direct download. I use it for dashboard interfaces—clean, minimal, and works well with React.
2. Phosphor Icons
Phosphor offers six styles (thin, light, regular, bold, fill, duotone) with over 7,000 icons. The SVG files are well-structured, and you can customize stroke width easily. I often recommend Phosphor for app design because of the variety—you can use regular style for navigation and duotone for call-to-action buttons. The project is open source under MIT license.
3. Bootstrap Icons
With over 1,500 icons, Bootstrap Icons is designed specifically for web applications. They include common UI elements like arrows, media controls, and file types. The SVG files are optimized for rendering in browsers. I've used them in several marketing sites—they work well with Bootstrap or any CSS framework.
4. Material Design Icons (Google)
This is the largest set on this list—over 5,000 icons covering Android, iOS, and web. Google provides them in SVG, PNG, and icon font formats. The icons are categorized by theme (action, alert, social, etc.). However, the sheer size can be overwhelming—I recommend using the official search tool to find what you need.
5. Tabler Icons
A newer set with over 4,000 icons, Tabler Icons offers consistent 24x24 pixel grid with 2px stroke. They have outline and filled versions, and the website includes a handy copy-to-clipboard feature for SVG code. I've used these in a SaaS product—the icons are crisp and look great on high-DPI screens.
6. Remix Icon
Remix Icon provides over 2,500 icons in two styles: line (outline) and fill. The project is open source under Apache 2.0 license. I like that they include both web and app-specific icons like QR code scanner and camera. The download package includes SVG and PNG files for each icon.
7. Heroicons
Made by the Tailwind CSS team, Heroicons offers 450+ icons in outline (24x24) and solid (20x20) styles. The SVG files are hand-crafted and optimized. I use Heroicons for Tailwind projects because they integrate seamlessly—just copy the SVG code. They also offer a React component library.
8. Boxicons
Boxicons has over 1,500 icons in three styles: regular, solid, and logo. The icons are designed for web development and include social media icons. The license is MIT, and they offer SVG and PNG downloads. I've found the logo set particularly useful for footer sections.
Comparison Table: Best Free Icon Sets
| Icon Set | Icons Count | Styles | License | SVG/PNG | Best For |
| --- | --- | --- | --- | --- | --- |
| Lucide | 1,000+ | Outline, filled | MIT | Yes | Dashboards, minimal UI |
| Phosphor | 7,000+ | 6 styles | MIT | Yes | App design, variety |
| Bootstrap Icons | 1,500+ | Outline, filled | MIT | Yes | Web apps, Bootstrap |
| Material Design | 5,000+ | Various | Apache 2.0 | Yes | Android, general use |
| Tabler Icons | 4,000+ | Outline, filled | MIT | Yes | SaaS, crisp icons |
| Remix Icon | 2,500+ | Line, fill | Apache 2.0 | Yes | Web & app UI |
| Heroicons | 450+ | Outline, solid | MIT | Yes | Tailwind CSS projects |
| Boxicons | 1,500+ | Regular, solid, logo | MIT | Yes | Social media, web |
How to Download and Use Free SVG Icons
1. Visit the official website for each set—most have a search function
2. Search for the icon you need (e.g., "user", "settings", "home")
3. Download SVG for scalable use, or PNG for fallback (usually 24x24, 48x48, or 96x96)
4. Check the license—if it requires attribution, add a note in your project credits
5. Customize colors by editing the SVG fill or stroke attributes in code
For best performance, I recommend using SVG inline in HTML or React components. This avoids extra HTTP requests and allows CSS styling.
FAQ
Are these icon sets free for commercial use?
Yes, all the sets listed above use open-source licenses (MIT, Apache 2.0, or CC0) that allow commercial use without attribution. However, always double-check the specific license included in each download—some sets may have additional restrictions for logo usage.
Can I modify the SVG icons?
Absolutely. SVG files are plain text, so you can change colors, sizes, and even combine icons. Just make sure you follow the license terms—most allow modification. For example, I often change stroke width or add shadows to match a design system.
What's the best format: SVG or PNG?
SVG is better for modern web and app design because it scales without losing quality and has a smaller file size (typically 1-5 KB per icon). PNG is useful for older browsers or when you need a raster image (like in email templates). I recommend using SVG whenever possible and fall back to PNG only when necessary.
---
*Last updated: October 2025. All links and counts are verified at time of writing.*