I’ve been building websites and designing interfaces since 2019, and I can tell you: finding good free icons used to be painful. You’d download a pack, realize half the sizes were inconsistent, and end up mixing three different sets that looked like they came from three different planets.
Things got way better. There are now several icon libraries that are genuinely free, well-maintained, and consistent enough to use in production. I spent the last month testing 14 different icon sites for a redesign project, and narrowed it down to the ones actually worth your time.
If you’re also looking for free design tools to pair with these icons, I covered those separately.
Quick Comparison Table
| Site | Total Icons | Formats | License (Free) | Attribution Required | Best For |
|---|---|---|---|---|---|
| Flaticon | 16M+ | SVG, PNG, EPS, PSD | Freemium | Yes (free plan) | Variety and volume |
| Google Material Symbols | 3,200+ | SVG, Web Font, Variable Font | Apache 2.0 | No | Android/Material UI apps |
| Phosphor Icons | 9,000+ | SVG, React, Vue, Web Component | MIT | No | Versatile design systems |
| Heroicons | 300+ | SVG, JSX | MIT | No | Tailwind CSS projects |
| Iconoir | 1,500+ | SVG, React, Vue, Flutter | MIT | No | Clean minimal interfaces |
| Lucide | 1,500+ | SVG, React, Vue, Svelte | ISC | No | Lightweight web apps |
| Bootstrap Icons | 2,000+ | SVG, Web Font | MIT | No | Bootstrap-based projects |
1. Flaticon – Largest Free Icon Library
Flaticon is the biggest icon library on the internet. Over 16 million icons across every style you can imagine – flat, line, filled, hand-drawn, 3D, gradient. If you need something specific like “pizza delivery on a bicycle,” Flaticon probably has it.
The search works well. Type a keyword, filter by style (outline, filled, hand-drawn, etc.), color, and format. I tested it with some obscure queries during my project – “server rack isometric,” “Korean food filled” – and it returned usable results every time.
What You Get Free
Free accounts can download up to 10 icons per day in PNG or SVG. You must include attribution (a link back to Flaticon). The free selection is massive, but some collections are Premium-only.
Premium ($9.99/mo or $74.99/yr)
Removes attribution, raises download limits to 100/day, and gives access to the full library including premium packs. If you’re a freelance designer downloading icons regularly, the yearly plan pays for itself fast.
Pros: Unmatched variety. Every style and category covered. Multiple export formats (SVG, PNG up to 512px, EPS, PSD base64). Collections and packs for consistent sets.
Cons: Attribution required on free plan gets tedious. Quality varies since icons come from different designers – you need to stick to one author/pack for consistency. Some search results feel like spam with slight variations of the same icon.
2. Google Material Symbols – The Standard for Apps
Google redesigned their icon system in 2024, merging Material Icons into Material Symbols. The result is a variable font that lets you adjust weight, fill, grade, and optical size with CSS. One font file, infinite variations.
Here’s the thing – most people don’t realize how flexible this system is now. You can make the same icon look thin and elegant or thick and bold just by changing a CSS variable. No downloading different files.
The Numbers
3,200+ symbols. All free. Apache 2.0 license, so commercial use with zero attribution. Available as web font, SVG, or Android/iOS native components.
How the Variable Font Works
Instead of separate files for outlined vs. filled icons, Material Symbols uses font axes:
- Fill: 0 (outline) to 1 (solid)
- Weight: 100 to 700
- Grade: -25 to 200 (adjusts stroke without changing size)
- Optical size: 20px to 48px
I used this on a dashboard project and honestly it saved hours. One icon set that adapted to every context – sidebar nav, header actions, card indicators – all from the same source.
Pros: Variable font means infinite customization. Official Google design language. Perfect for Material UI or Android. Actively maintained with new symbols added quarterly.
Cons: Full font file is ~2.4MB (subsetting recommended). Style is distinctly “Google” – if your design goes for a different aesthetic, these won’t blend in. Limited to Google’s categories – no brand icons or domain-specific imagery.
3. Phosphor Icons – My Personal Favorite
Not gonna lie, Phosphor is the set I reach for first on most projects now. It started as a side project by a designer at Mapbox and grew into one of the most complete open-source icon libraries around.
9,000+ icons in 6 weights: thin, light, regular, bold, fill, and duotone. The duotone style is genuinely useful – two-color icons that add depth without the complexity of full illustrations. I haven’t seen another free set do duotone this well.
Framework Support
Native packages for React, Vue, Svelte, Elm, and web components. The React package is tree-shakeable, so you only ship the icons you actually use. Install, import, render. Clean API with size and color props.
Figma Integration
Their Figma plugin is solid. Search and insert directly in your design file. Switches between weights instantly. Saves the roundtrip of downloading SVGs and importing them.
Pros: 6 consistent weights per icon. Duotone style is a standout feature. MIT license, fully free for commercial use. Tree-shakeable framework packages. Active development – new icons every few months.
Cons: Smaller than Flaticon’s library, so niche topics might not be covered. No icon font option (SVG-only, which is fine for modern apps but not for legacy setups).
4. Heroicons – Built for Tailwind CSS
Heroicons comes from the Tailwind Labs team. If you’re already in the Tailwind ecosystem, these are the default choice. 300+ icons in three styles: outline (24px), solid (24px), and mini (20px).
The count is small compared to Phosphor or Flaticon. But honestly, 300 well-chosen icons cover 95% of what a typical web app needs. Navigation, actions, notifications, media controls, commerce – it’s all there.
Why Developers Like It
Copy-paste SVG directly from the website. Or use the React/Vue packages for component-based usage. Every icon is hand-crafted on a 24×24 grid with consistent 1.5px stroke widths (outline) or solid fills. They just look right at small sizes.
For a SaaS dashboard I built last year, Heroicons covered every single icon need. I didn’t have to look elsewhere once. That’s the strength of a curated set.
Pros: Curated quality over quantity. Perfect pixel alignment on 24px grid. Direct Tailwind CSS integration. MIT license.
Cons: Only ~300 icons – you will hit limits on complex projects. No duotone or colored variants. Three styles only (outline, solid, mini). If you need social media or brand icons, look elsewhere.
5. Iconoir – Open Source and Growing Fast
Iconoir started in 2021 and has grown to 1,500+ icons. All open source, MIT licensed. The style sits somewhere between Heroicons and Phosphor – clean lines, consistent 1.5px stroke, slightly rounded corners.
What caught my attention was the framework coverage. React, React Native, Vue, Svelte, Flutter, CSS (as background images), and even a Figma plugin. For a free library maintained by a small team, the tooling is impressive.
Customization
Their website has a live customizer: change stroke width, size, and color before downloading. It generates the SVG code in real-time. Useful when you need a quick one-off without installing a package.
I used Iconoir for a mobile app prototype in Flutter. The Flutter package worked out of the box – just Iconoir.calendar and done. Saved me from dealing with custom SVG rendering.
If you’re building design assets and need free fonts to go with your icons, I tested hundreds of those too.
Pros: Fast-growing library. Excellent multi-platform support (including Flutter and React Native). Clean consistent style. MIT license. Active community on GitHub.
Cons: 1,500 icons means gaps in specialized categories. Some icons feel generic. No filled/solid weight option for most icons (outline-only). Documentation could be more detailed for the CSS-only approach.
6. Lucide – Feather Icons, But Better
Feather Icons was one of the most popular open-source icon sets, but development stalled around 2022. Lucide is the community fork that kept going. Same clean aesthetic, but with 1,500+ icons (Feather had ~280) and active maintenance.
Why It Works
Every icon is designed on a 24×24 grid with 2px stroke width, square stroke caps, and round stroke joins. This consistency means you can mix any Lucide icons together and they look like they belong. Sounds obvious, but try mixing icons from two random free sites and you’ll appreciate this.
Packages exist for React, Vue, Svelte, Angular, Preact, Solid, and vanilla JS. Each one is tree-shakeable. The React package adds about 0.5KB per icon to your bundle – some of the lightest icon components I’ve measured.
Figma and Sketch
Official Figma library available. Auto-updates when new icons are added to the set. The naming convention matches the code package names, so handoff between design and development is smooth.
Pros: Lightest bundle size I’ve tested. Perfect stroke consistency. Seamless Feather Icons migration (same names, same grid). Framework packages for everything. 50+ contributors keeping it alive.
Cons: No filled variants (outline-only). 2px stroke is slightly thick for some UI contexts. Overlaps heavily with Heroicons in coverage – choosing between them is mostly preference.
7. Bootstrap Icons – Best for Bootstrap Projects
Bootstrap Icons launched as an official companion to Bootstrap 5. 2,000+ icons available as SVGs and a web font. If you’re building with Bootstrap, using these is a no-brainer – the sizing, spacing, and visual weight are designed to match Bootstrap components exactly.
Two Ways to Use Them
Web font: Add one CSS file, use class names like bi-alarm. Simple, familiar if you’ve used Font Awesome. Downside: loads all 2,000+ icons even if you use five.
SVG sprite: Reference individual icons from a sprite sheet. Better for performance but slightly more markup. Or import individual SVGs for the lightest approach.
Beyond Bootstrap
Look, you don’t need to be using Bootstrap to use these icons. They work fine standalone. The style is neutral enough for most projects – not as opinionated as Material Symbols, not as minimal as Heroicons. They sit in a practical middle ground.
For projects that also need free stock photos, I covered the best sites in a separate review.
Pros: 2,000+ icons covering a wide range. Both font and SVG options. MIT license, no attribution. Designed to match Bootstrap’s visual language. Searchable website with instant SVG preview.
Cons: Web font approach is heavy (~400KB). Design updates lag behind Bootstrap framework updates. Some business/enterprise icons feel generic. No weight or fill variations.
How I Pick Icons for a Project
After testing all these libraries, here’s my actual decision process:
Building with Tailwind? Start with Heroicons. If you need more than 300, supplement with Phosphor.
Building with Bootstrap? Bootstrap Icons. Done.
Need maximum variety? Flaticon, but budget for the Premium plan if it’s a commercial project.
Need multiple weights and duotone? Phosphor. Nothing else free comes close on weight variety.
Replacing Feather Icons? Lucide. Drop-in replacement with 5x more icons.
Cross-platform (web + mobile)? Iconoir or Phosphor, both have native packages for React Native and Flutter.
Google/Material design? Material Symbols. The variable font system is genuinely powerful.
SVG vs Icon Fonts in 2026
Quick take: use SVG. Icon fonts made sense ten years ago when SVG support was spotty. In 2026, every browser handles SVG natively. The advantages stack up:
- Load only the icons you use (tree-shaking)
- Style individual parts with CSS (color, stroke-width, animations)
- Better accessibility – SVGs can include
<title>andaria-label - No weird anti-aliasing issues that icon fonts sometimes have
- Sharper rendering at all sizes
The only scenario where icon fonts still make sense: you’re maintaining a legacy codebase that already uses them and the migration effort isn’t worth it. For anything new, go SVG.
Licensing Cheat Sheet
This trips people up, so here’s the plain version:
| License | Commercial Use | Attribution | Modify | Redistribute |
|---|---|---|---|---|
| MIT | Yes | Include license file | Yes | Yes |
| Apache 2.0 | Yes | Include license + notice | Yes | Yes |
| CC BY 4.0 | Yes | Credit the creator | Yes | Yes |
| Flaticon Free | Yes | Link to Flaticon | Limited | No |
| ISC | Yes | Include license | Yes | Yes |
“Include license file” is different from “credit the creator.” MIT and Apache just need the LICENSE file somewhere in your project (your node_modules already have it if you installed via npm). CC BY 4.0 means visible attribution – a note in your footer or credits page.
Performance Tips for Using Icons
A few things I’ve learned the hard way:
Don’t load 2,000 icons when you use 40. This sounds obvious but it happens constantly. Icon fonts load everything. SVG sprites can be subset. Individual SVG imports are the most efficient. On one project, switching from Font Awesome’s full font to individually imported Lucide SVGs cut icon-related bundle size from 380KB to 12KB.
Inline SVGs for above-the-fold icons. If an icon is in your header or hero section, inline the SVG markup directly in the HTML. Eliminates the network request. For icons below the fold, external SVG references or lazy-loaded components are fine.
Use CSS for color changes, not separate SVG files. I’ve seen designers export the same icon in 5 colors as 5 different files. Just use one SVG and change the color with fill or stroke in CSS. Also works with CSS currentColor to inherit from the parent element’s text color.
If you’re working with images alongside icons, check out the best free image compressors to keep your page weight down.
FAQ
What are the best free icon download sites in 2026?
Flaticon has the largest library at 16M+ icons. For open-source developer-focused sets, Phosphor Icons (9,000+ in 6 weights), Google Material Symbols (3,200+ with variable font), and Heroicons (300+ handcrafted for Tailwind) are the strongest options. All are free for commercial use.
Can I use free icons for commercial projects?
Yes, with caveats. Phosphor, Heroicons, Iconoir, Lucide, and Bootstrap Icons use MIT or similar licenses – commercial use allowed, no visible attribution needed. Flaticon’s free tier requires attribution links. Always check the specific license before shipping.
What icon format should I use for web projects?
SVG. It scales without quality loss, can be styled with CSS, tree-shakes to only include icons you use, and has better accessibility than icon fonts. PNG only makes sense for email clients or systems that don’t support SVG.
Is Flaticon really free?
The free tier gives access to millions of icons with a 10-download daily limit and mandatory attribution. Premium ($9.99/month) removes attribution, raises limits to 100/day, and unlocks premium collections. For occasional use, the free tier works. For regular work, you’ll likely want Premium.
What is the difference between icon fonts and SVG icons?
Icon fonts load every icon as a single font file – simple setup but wasteful if you only use a few. SVG icons can be loaded individually, styled per-icon (colors, animations, hover states), and have better accessibility. SVG is the standard for new projects in 2026. Icon fonts are fine for legacy codebases where migration isn’t practical.