The Best Open-Source Icon Libraries, Compared by Style and License

Here is a pattern I have watched play out dozens of times: a designer picks an icon library in the first week of a project, and the entire product carries that visual DNA for years. It is one of those early decisions that quietly shapes everything.

The problem is that most icon library roundups are written by icon library creators. Hugeicons ranks Hugeicons first. Lineicons ranks Lineicons first. Shocking.

I have no icon library to sell you. I have spent years building interfaces and have strong opinions about which libraries hold up across real projects and which ones become regret. This is the unbiased comparison I wish I had found when starting my last three products.

The master comparison table

|---|---|---|---|---|---|---|---|---|

| Lucide | 1,500+ | ISC | 1 (outline) | 24×24 | Yes | Yes | Yes | Yes |

| Heroicons | 300+ per style | MIT | 4 (outline, solid, mini, micro) | 24/20/16 | Yes | Yes | No | No |

| Phosphor | 9,000+ | MIT | 6 weights | 24×24 | Yes | Yes | Yes | Yes |

| Tabler Icons | 5,900+ | MIT | 2 (outline, filled) | 24×24 | Yes | Yes | Yes | Yes |

| Bootstrap Icons | 2,000+ | MIT | 2 (outline, filled) | 16×16 | No | No | No* | No |

| Iconoir | 1,600+ | MIT | 1 (outline) | 24×24 | Yes | Yes | Yes | No |

| Remix Icon | 2,800+ | Apache 2.0 | 2 (line, fill) | 24×24 | No | No | No* | No |

Community wrappers available but not officially maintained.

[Search 15+ icon libraries by style, weight, and framework support → Mantlr](https://mantlr.com)

The Lucide problem nobody talks about

Lucide is everywhere. It is the default icon library in shadcn/ui, which means it ships with every v0 project, every Vercel template, and most Next.js starter kits built in the last two years.

A quick note on Feather Icons: Lucide is the active community fork of Feather Icons (287 icons, no longer maintained). If you see Feather recommended elsewhere, Lucide is what you want — same design language, same 24×24 grid, but expanded to 1,500+ icons with ongoing development.

That ubiquity is both its strength and its problem. If you are building a SaaS product in 2026 and using Lucide defaults, your interface will look subtly identical to hundreds of other products. The icons are well-drawn and the 24×24 grid is clean — but you are using the same visual language as your competitors.

When Lucide is the right call: Internal tools, dashboards, MVPs where speed matters more than brand differentiation. The 1,500+ icon count covers most interface needs, and the ISC license is extremely permissive.

When to look elsewhere: Consumer products where visual distinctiveness matters. Marketing sites. Any product where you want the icons to carry personality.

Heroicons — the quality benchmark in a smaller package

Heroicons ships fewer icons than everyone else on this list. That is actually a feature.

Tailwind Labs maintains these with the same obsessive attention they bring to Tailwind CSS. Every icon has four variants — outline, solid, mini (20px), and micro (16px) — which gives you density flexibility that Lucide cannot match. When you need a compact icon for a tight toolbar alongside a larger version for a feature section, Heroicons handles that without mixing libraries.

The limitation is real though. At 300+ icons per style, you will hit coverage gaps on niche use cases. Need a "warehouse" icon? A "microscope"? You will be combining Heroicons with something else, and that introduces visual inconsistency.

Best for: Tailwind projects that prioritize quality over quantity. Teams that value constraint.

Phosphor — the maximalist choice that actually works

Nine thousand icons in six weight variants. That is not a typo.

Phosphor is the library I recommend when someone asks "which library has the most flexibility?" Every icon comes in thin, light, regular, bold, fill, and duotone weights. That range lets you use a single library across marketing pages (thin, elegant weights), product UI (regular weight), and action-heavy interfaces (bold, filled) — all with consistent visual language.

The duotone variant is particularly useful. It gives you two-color icons that add depth without the complexity of full-color illustration. I have used Phosphor duotone on dashboard projects where standard outline icons felt too flat but illustrations would be overkill.

The honest downside: With 9,000+ icons, some are inevitably less polished than others. The core set is excellent but edge-case icons can feel uneven. Tree-shake aggressively.

Tabler — the underrated workhorse

Tabler Icons rarely gets top billing, and I think that is a mistake. At 5,900+ icons with both outline and filled variants, it hits the sweet spot between Lucide's conservative set and Phosphor's maximalist library.

The stroke width is slightly thinner than Lucide by default, which gives interfaces a lighter, more modern feel. And the coverage is genuinely comprehensive — I have yet to search for an icon in Tabler and come up empty.

The Tabler advantage nobody mentions: Every icon is designed on the same 24×24 grid with consistent 2px strokes and 6px corner radii. That consistency holds up even when you mix icons heavily. Not every library maintains that discipline at scale.

Best for: Product design teams that want broad coverage without Phosphor's overwhelming catalog. Projects where outline-to-filled toggling matters (active states, navigation highlights).

Bootstrap Icons — the web component option

If you are working outside React/Vue/Svelte — maybe vanilla JS, WordPress, or static sites — Bootstrap Icons deserves a look. The 16×16 native grid is smaller than the 24px standard, which makes them sharp at small sizes without scaling artifacts.

The library is framework-agnostic by design, using web fonts and SVG sprites. That matters if your project cannot justify a React dependency just for icons.

The limitation: The visual style is tied to Bootstrap's aesthetic. If you are not using Bootstrap, the icons can feel slightly out of place next to more modern UI frameworks.

How to choose: the decision framework

After working with all of these across different projects, here is my practical decision tree:

Are you using shadcn/ui or a Tailwind starter kit? Lucide is already installed. Use it unless brand differentiation is a priority.

Do you need multiple weight variants? Phosphor. Nothing else gives you six weights per icon.

Is your icon budget under 500 unique icons? Heroicons. Quality over quantity.

Do you need the widest coverage possible? Tabler (5,900+) or Phosphor (9,000+). Check that your specific use-case icons exist before committing.

Are you building without a JS framework? Bootstrap Icons or Remix Icon for framework-agnostic SVG/font usage.

Is Figma integration critical to your workflow? Lucide, Phosphor, and Tabler all have official Figma plugins. Heroicons does not.

License clarity — what each license actually means

Every library on this list is free for commercial use, but the licenses differ in what they require from you.

MIT License (Heroicons, Phosphor, Tabler, Bootstrap, Feather): Do whatever you want. Include the copyright notice in your source code. That is it.

ISC License (Lucide): Functionally identical to MIT. Slightly different legal language, same practical freedom.

Apache 2.0 (Remix Icon): Free for commercial use, but if you modify the icons and distribute them, you need to document the changes. Slightly more restrictive than MIT.

GPL (none of these): No icon library on this list uses GPL, which means none of them force your project to be open source.

A note on bundle size

If performance matters — and it always does — icon library tree-shaking support is critical. Importing an entire library when you use 40 icons is waste.

Lucide, Heroicons, Phosphor, and Tabler all support individual icon imports and tree-shake cleanly with modern bundlers. Bootstrap Icons and Remix Icon require more careful setup for optimal bundle sizes.

On a recent project I measured the difference: a tree-shaken Lucide import of 45 icons added roughly 12KB gzipped. Importing the entire library would have added 180KB+. That matters for Core Web Vitals.

Frequently asked questions

What is the best free icon library in 2026?

It depends on your project. For most React/Next.js projects, Lucide offers the best combination of quality, coverage, and ecosystem integration. For maximum flexibility, Phosphor's 9,000+ icons in six weights is unmatched.

Why are teams moving away from Font Awesome?

Three reasons: bundle size, rendering approach, and ecosystem alignment. Font Awesome was built for the web font era — it loads an entire icon font file regardless of how many icons you use. Modern SVG-based libraries like Lucide, Heroicons, and Phosphor are tree-shakeable (only the icons you import ship to the browser), render crisper at all sizes because they are native SVG, and integrate directly with React/Vue/Svelte component systems. Font Awesome's Pro tier also moved to a subscription model, while every library in this comparison is free and open source. If your project still uses Font Awesome, switching to Lucide is the most straightforward migration — both use similar line-style icons on a 24px grid.

What icon library does shadcn/ui use?

Lucide. It is the default icon library in shadcn/ui, which means it ships with most projects built using v0, Next.js templates, and the broader Vercel ecosystem.

Are Heroicons free for commercial use?

Yes. Heroicons uses the MIT license, which permits unrestricted commercial use with only a copyright notice requirement.

What is the difference between Lucide and Feather Icons?

Lucide is a community-maintained fork of Feather Icons. It has expanded the original 287-icon set to 1,500+ while maintaining the same design language and 24×24 grid. Feather is essentially archived; Lucide is the active successor.

Picking the right library is a design decision, not a development one

The icon library you choose affects your product's visual personality more than most designers realize. It is not just about "which has the icon I need" — it is about stroke weight, optical consistency, and whether your interface feels distinctive or generic.

Spend 30 minutes browsing the actual icons in your top two choices. Render them at the sizes you will actually use. Then decide.