Discover the best free icon libraries with thousands of SVG icons for websites, apps, and design projects. Compare licenses, styles, and how to use them.
Every UI begins with the same quiet crisis: you need icons, and you need them now. A navigation menu needs a hamburger. A settings page needs a gear. A dashboard needs thirty different glyphs that all look like they belong together, scale cleanly from 16px to 64px, and don't cost you a licensing headache six months later.
I've shipped dozens of projects, and I still spend an unreasonable amount of time on icon selection. Not because good icons are hard to find — the opposite, actually. There are so many free icon libraries in 2026 that the real challenge is picking the right one and sticking with it.
This guide is the result of testing every major free icon library against real projects. I'll compare them honestly, show you how to integrate SVG icons into modern web stacks, and help you pick the library that fits your workflow.
Before we dive into specific libraries, let's settle the format question.
Icon fonts had their decade. They were convenient — load a CSS file, use a class name, done. But icon fonts are blurry on certain displays, can't be styled per-path, suffer from FOUT (flash of unstyled text), and ship entire glyph sets even when you use three icons.
Raster images (PNG, ICO) don't scale. Period. In a world of 4K monitors, variable-DPI phones, and responsive layouts, pixel-based icons are a liability.
SVG wins because:
Akousa<title>, aria-label, and role="img"The entire industry has converged on SVG. Every library in this guide ships SVG as its primary format.
Icon count: 1,500+ License: ISC (fully permissive, commercial use OK) Formats: SVG, React, Vue, Svelte, Angular, Flutter, Figma Style: Outlined, consistent 24x24 grid, 2px stroke
Lucide is a community fork of Feather Icons that has become one of the most actively maintained icon sets in the ecosystem. Where Feather stalled at around 287 icons, Lucide has expanded to over 1,500 while maintaining the exact same design language: clean outlines, rounded joins, consistent optical weight.
What makes Lucide exceptional is its framework integration. The lucide-react package uses tree-shaking so aggressively that importing five icons adds roughly 2KB to your bundle. Each icon is a standalone ES module.
Best for: Modern web apps, SaaS dashboards, developer tools. If you're building with React or Vue and want consistency without bloat, Lucide is hard to beat.
Icon count: 300+ License: MIT Formats: SVG, React, Vue Style: Outline (24px), Solid (24px), Mini (20px), Micro (16px)
Created by the Tailwind CSS team, Heroicons is the icon library for anyone already in the Tailwind ecosystem. The collection is smaller than most competitors, but every icon is meticulously designed with four variants optimized for different sizes.
The Micro variant (16px) is a standout — most libraries give you a single design and expect it to work at all sizes. Heroicons acknowledges that a 16px icon needs different optical compensation than a 24px one.
Best for: Tailwind CSS projects, marketing sites, landing pages. If you prioritize design quality over quantity.
Icon count: 9,000+ License: MIT Formats: SVG, React, Vue, Flutter, Elm, Figma, Sketch Style: Six weights — Thin, Light, Regular, Bold, Fill, Duotone
Phosphor is the Swiss Army knife of icon libraries. Over 1,500 base icons, each available in six weights, giving you 9,000+ total variants. The duotone style — where icons have a primary and secondary layer — is genuinely unique and opens up design possibilities that other libraries can't match.
The weight system is brilliant for creating visual hierarchy. Use Bold for primary actions, Regular for navigation, Light for secondary elements. Everything stays cohesive because the underlying geometry is identical across weights.
Best for: Design systems, branded applications, projects that need visual hierarchy through icon weight variation.
Icon count: 5,500+ License: MIT Formats: SVG, React, Vue, Angular, Svelte, Figma Style: Outlined and filled, 24x24 grid, configurable stroke width
Tabler Icons is the largest consistently-designed free icon library available. At over 5,500 icons, the coverage is remarkable — you'll find icons for niche categories like medical, weather, zodiac, brand logos, and file types that other libraries ignore.
The customizable stroke width is a practical advantage. You can adjust icons from 0.5px to 3px strokes, making them adapt to different UI densities without switching libraries.
Best for: Large-scale applications, admin panels, projects that need comprehensive category coverage without mixing multiple icon sets.
Icon count: 3,000+ License: Apache 2.0 Formats: SVG, Web font, Android, iOS, Flutter Style: Variable font with weight, grade, optical size, and fill axes
Google's icon system has evolved significantly. Material Symbols replaced Material Icons with a variable-font approach that lets you tune weight, fill, grade, and optical size on a continuous axis — not just "outline" or "filled" but anywhere in between.
The integration with Material Design 3 means these icons work seamlessly in Android/Flutter projects. For web, the variable font approach is powerful but adds complexity. The SVG downloads are more straightforward for most web use cases.
Best for: Android/Flutter apps, Material Design projects, applications that need variable icon properties.
Icon count: 2,000+ License: MIT Formats: SVG, Web font, Figma Style: Outlined and filled
Don't dismiss Bootstrap Icons because of the name. This is a standalone library that works with any framework — you don't need Bootstrap CSS. The collection covers common UI patterns comprehensively, and the design quality is consistently high.
The SVG sprite sheet option is well-documented and efficient for projects loading many icons on a single page.
Best for: General-purpose web projects, Bootstrap-based sites, projects that need reliable coverage of standard UI icons.
Icon count: 1,600+ License: MIT Formats: SVG, React, React Native, Vue, Flutter, Figma Style: Outlined, 24x24, distinctive rounded aesthetic
Iconoir has a personality. Where most icon libraries aim for neutral professionalism, Iconoir's rounded style feels friendly and approachable. The icons have slightly more character than Lucide or Heroicons without crossing into playful territory.
React Native support is a notable differentiator — most libraries treat mobile as an afterthought.
Best for: Consumer-facing apps, products that want a warm and friendly visual tone, React Native projects.
Icon count: 2,800+ License: Apache 2.0 Formats: SVG, Web font, Figma Style: Outlined and filled
Remix Icon is comprehensive and well-organized. Icons are grouped into logical categories (System, Business, Communication, Design, Development, etc.), making browsing and discovery efficient. The line and fill variants maintain strong visual consistency.
Best for: Medium to large projects needing broad category coverage, teams that want organized icon browsing.
Icon count: 287 License: MIT Formats: SVG, React, Figma Style: Outlined, 24x24 grid, 2px stroke
Feather is the original that inspired Lucide, and it remains a perfectly valid choice for small projects. The collection is deliberately limited — 287 icons covering the most common UI patterns. No bloat, no decision fatigue.
Development has slowed significantly, which is why Lucide forked it. But if 287 icons covers your needs, Feather's design quality is still excellent.
Best for: Small projects, MVPs, developers who want minimal choice and maximum consistency.
Icon count: 300+ License: MIT Formats: SVG, React Style: 15x15 grid, minimalist
Built by the Radix UI team, these icons are designed specifically for tight UI spaces. The 15x15 grid is unusual — most libraries use 24x24 — and produces icons that look sharp in compact interfaces like toolbars, sidebars, and data tables.
Best for: Dense UIs, developer tools, applications built with Radix UI or Shadcn/UI.
Icon count: 1,300+ License: MIT Formats: SVG, Web Components, React, Vue Style: Outline, filled, sharp variants
Ionicons is the default icon set for the Ionic Framework, but it works independently. The three-variant approach (outline, filled, sharp) gives you flexibility, and the Web Components implementation means zero framework dependency.
Best for: Ionic/Capacitor apps, cross-platform projects, teams that prefer Web Components.
Icon count: 3,100+ License: CC0 1.0 (public domain) Formats: SVG, npm, CDN Style: Brand logos only
Simple Icons is the definitive collection of brand and company logos in SVG format. Need the Slack logo? Spotify? A cryptocurrency exchange? Simple Icons has it, usually within days of a rebrand.
This isn't a general-purpose UI library — it's exclusively brand marks. But for that purpose, nothing else comes close.
Best for: Social links, technology stack displays, integration pages, "powered by" sections.
| Library | Icons | License | Variants | Tree-Shakeable | Figma | Best Use Case |
|---|---|---|---|---|---|---|
| Lucide | 1,500+ | ISC | Outline | Yes | Yes | SaaS, web apps |
| Heroicons | 300+ | MIT | 4 sizes | Yes | Yes | Tailwind projects |
| Phosphor | 9,000+ | MIT | 6 weights | Yes | Yes | Design systems |
| Tabler | 5,500+ | MIT | Outline + Fill | Yes | Yes | Large apps |
| Material Symbols | 3,000+ | Apache 2.0 | Variable | Partial | Yes | Android/Flutter |
| Bootstrap Icons | 2,000+ | MIT | Outline + Fill | No (sprite) | Yes | General-purpose |
| Iconoir | 1,600+ | MIT | Outline | Yes | Yes | Consumer apps |
| Remix Icon | 2,800+ | Apache 2.0 | Line + Fill | No (font) | Yes | Broad coverage |
| Feather | 287 | MIT | Outline | Yes | Yes | Small projects |
| Radix | 300+ | MIT | Minimal | Yes | No | Dense UIs |
| Ionicons | 1,300+ | MIT | 3 variants | Yes | No | Ionic/Capacitor |
| Simple Icons | 3,100+ | CC0 | Logos only | Yes | No | Brand logos |
Knowing which library to pick is half the battle. The other half is integrating icons efficiently. Here are the three primary approaches, with real code.
The most common approach in modern frameworks. You import an icon as a React component (or equivalent) and render it directly in the DOM.
// React with Lucide
import { Search, Settings, User } from "lucide-react";
function Navbar() {
return (
<nav>
<Search size={20} strokeWidth={1.5} />
<Settings size={20} strokeWidth={1.5} />
<User size={20} strokeWidth={1.5} />
</nav>
);
}// React with Heroicons
import { MagnifyingGlassIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
function Toolbar() {
return (
<div className="flex gap-2">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-600" />
<Cog6ToothIcon className="h-5 w-5 text-gray-600" />
</div>
);
}Pros: Tree-shakeable, individually stylable, works with SSR. Cons: Each icon adds DOM nodes, can bloat HTML on pages with hundreds of icons.
Bundle multiple icons into a single SVG sprite file and reference them with <use>. This is ideal for traditional (non-SPA) websites.
<!-- sprite.svg contains all your icons -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-search" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none" />
<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" />
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 24">
<path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" />
</symbol>
</svg>
<!-- Use anywhere in the page -->
<svg class="icon" width="24" height="24">
<use href="#icon-search" />
</svg>Pros: Single HTTP request, cached efficiently, minimal DOM weight per instance. Cons: No tree-shaking, entire sprite loads regardless of usage.
Use SVG icons as CSS mask images for purely decorative icons. The icon inherits color from background-color, and you avoid adding SVG to the DOM entirely.
.icon-search {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background-color: currentColor;
mask-image: url("/icons/search.svg");
mask-size: contain;
mask-repeat: no-repeat;
}<span class="icon-search" aria-hidden="true"></span>Pros: Zero DOM overhead, color inherits from text, great for decorative icons. Cons: No multi-color support, accessibility requires extra ARIA work, browser needs to fetch each SVG.
Icons without labels are invisible to screen readers. Always pair icons with accessible text:
// Standalone icon (no visible label) — needs aria-label
<button aria-label="Search">
<Search size={20} aria-hidden="true" />
</button>
// Icon alongside visible text — hide the icon from AT
<button>
<Search size={20} aria-hidden="true" />
<span>Search</span>
</button>The pattern is straightforward: if there's a visible text label, set aria-hidden="true" on the SVG. If the icon is the only content, add aria-label to the parent interactive element.
With a dozen options, paralysis is real. Here is a practical decision tree.
Need fewer than 300 icons? Go with Heroicons or Feather. Smaller sets mean faster decisions and guaranteed consistency.
Building a design system with weight variation? Phosphor is the only library offering six weights per icon. This alone makes it the right choice for teams building component libraries with multiple visual tiers.
Need maximum coverage (5,000+ icons)? Tabler Icons is the largest single-designer-consistent set. If Tabler doesn't have it, check Remix Icon.
Working with Tailwind CSS? Heroicons was literally built by the Tailwind team. The integration is frictionless.
Need brand logos? Simple Icons, no contest. Use it alongside your UI icon library of choice.
Building for mobile with React Native? Iconoir and Phosphor both have first-class React Native packages.
If you're exploring open-source design tools more broadly — not just icons but full software alternatives — the open-source alternatives directory on akousa.net catalogs hundreds of free tools across 15 categories, including design and developer tooling. It's a useful starting point for building an entirely open-source workflow.
Raw SVG files from icon libraries are usually already optimized, but if you're working with custom icons or modified SVGs, optimization matters.
SVGO strips metadata, collapses groups, removes invisible elements, and minifies path data. Most icon libraries run SVGO during their build process, but run it yourself on custom icons:
# Install globally
npm install -g svgo
# Optimize a single file
svgo icon.svg -o icon.min.svg
# Optimize an entire directory
svgo -f ./raw-icons -o ./optimized-iconsA typical icon might drop from 1.2KB to 400 bytes after SVGO processing. Multiply that across hundreds of icons and the savings are significant.
Never import the entire library: import { Search } from 'lucide-react' imports one icon. import * as icons from 'lucide-react' imports all 1,500+.
Use dynamic imports for rarely-seen icons: Icons in modals, dropdowns, or below-the-fold sections can be lazy-loaded.
import { lazy, Suspense } from "react";
const HeavyIconSet = lazy(() => import("./HeavyIconSet"));
function Panel({ isOpen }) {
return isOpen ? (
<Suspense fallback={<div className="w-5 h-5" />}>
<HeavyIconSet />
</Suspense>
) : null;
}webpack-bundle-analyzer, rollup-plugin-visualizer) and check how many icon bytes you're actually shipping. I've seen projects importing 200KB of icons while rendering 12.Not all open-source licenses are equal when it comes to commercial use. Here's what matters:
MIT / ISC / Apache 2.0: Use anywhere, modify freely, include in commercial products. Attribution is usually required (a comment in your source code satisfies this). These are the most permissive licenses.
CC0 (Creative Commons Zero): Public domain. No attribution required. No restrictions whatsoever. Simple Icons uses this.
CC BY 4.0: Free to use, but you must give attribution. Some icon packs on aggregator sites use this.
GPL: Free to use, but derivative works must also be GPL-licensed. This rarely appears in icon libraries, but check before using icons from unknown sources.
SIL OFL (Open Font License): Specifically designed for fonts. Applies to some icon fonts. Allows embedding and redistribution.
Every library in this guide is safe for commercial use. The distinction matters most when you're mixing icons from multiple sources or redistributing icon files as part of a template or design kit.
Mixing icon libraries: Using Lucide for navigation, Heroicons for forms, and Tabler for the dashboard creates visual inconsistency. Pick one primary library and stick with it. The only exception is brand logos (Simple Icons) alongside a UI library.
Ignoring stroke width consistency: If your chosen library uses 2px strokes, don't mix in icons with 1.5px strokes from another set. The difference is subtle but noticeable, especially at smaller sizes.
Not testing at actual render size: Icons designed on a 24x24 grid can fall apart at 14px. Always test icons at the smallest size you'll use them. Libraries like Heroicons with size-specific variants handle this better than one-size-fits-all sets.
Skipping dark mode testing: An icon that's perfectly visible on white can disappear on a dark background if its stroke or fill is hardcoded to a dark color. Always use currentColor for stroke and fill values so icons inherit from their parent's text color.
Over-animating: A subtle hover transition on an interactive icon is pleasant. Spinning, bouncing, and pulsing every icon on the page is not. Restraint is a design skill.
Yes. Every library in this guide — Lucide, Heroicons, Phosphor, Tabler, Material Symbols, Bootstrap Icons, Iconoir, Remix Icon, Feather, Radix Icons, Ionicons, and Simple Icons — permits commercial use. The licenses (MIT, ISC, Apache 2.0, CC0) are all business-friendly. You should include a license attribution file in your project (most are a single line), but you won't owe royalties or fees.
Lucide and Heroicons are the strongest choices for React. Lucide offers 1,500+ icons with aggressive tree-shaking — importing five icons adds roughly 2KB to your bundle. Heroicons integrates seamlessly with Tailwind CSS and offers four size variants. Phosphor is the best option if you need weight variation (thin, light, regular, bold, fill, duotone). All three ship dedicated React packages with TypeScript support.
For interactive icons (buttons, links), add aria-label to the parent element and aria-hidden="true" to the SVG. For decorative icons next to visible text, simply set aria-hidden="true" on the SVG so screen readers skip it. For standalone informational icons (like a warning symbol), use an <svg> with role="img" and a nested <title> element describing the icon's meaning.
SVG has comprehensively won. Icon fonts suffer from blurry rendering on certain displays, cannot be styled per-path, add full glyph sets to your payload even when you use a fraction, and have accessibility limitations (screen readers sometimes read icon fonts as text characters). SVG icons are crisp at every size, individually tree-shakeable, stylable with CSS, animatable, and natively accessible. Every major icon library now ships SVG as the primary format.
Most web applications use between 30 and 80 unique icons. Unless you're building an icon-heavy application like a file manager or design tool, even the smallest library in this guide (Feather at 287 icons) will cover your needs. Start with a smaller set and expand only if you hit gaps. Having fewer options forces design consistency, which is usually a good thing.
If I had to pick one library for a greenfield project in 2026, it would be Lucide. The combination of 1,500+ icons, ISC license, aggressive tree-shaking, consistent design language, and first-class framework support makes it the most versatile option for modern web development.
But the honest answer is: the best library depends on your constraints. Heroicons if you live in Tailwind-land. Phosphor if you need weight variation. Tabler if you need sheer quantity. Simple Icons for brand logos. The comparison table above gives you everything you need to make that call in under a minute.
Whatever you choose, commit to it. Icon consistency matters more than icon perfection. A dashboard using 50 icons from one library will always look more professional than one using 50 "perfect" icons cherry-picked from five different sets.