Best Free Icon Libraries for React in 2025
A practical comparison of the top free React icon libraries — Lucide, Heroicons, Phosphor, React Icons, and krz-icons — covering icon count, bundle size, TypeScript support, and licensing.
Choosing an icon library is a surprisingly consequential decision. It affects your bundle size, your design consistency, and how long it takes your team to find the icon they need. Here is an honest look at the most popular free options in 2025.
What to look for in a React icon library
- Icon count. More icons means fewer "close-enough" compromises. The sweet spot is 1 000–20 000+.
- Tree-shakeable ESM build. You should only pay for what you import.
- TypeScript types. Autocomplete and type checking saves time daily.
- Consistent grid & stroke. Icons from the same library look right side by side. Different baselines break visual rhythm.
- Variants. Duotone, filled, off, framed — variant support extends a library's usefulness.
- License. MIT is the gold standard. Check before production use.
1. krz-icons
Icons: 20 000+ · License: MIT · Variants: Regular, duotone, off, circle, square, hexagon, octagon
krz-icons is the largest consistent stroke library available today. Every icon sits on the same 24×24 grid with a round 1 px stroke, which means any two of the 20 000+ icons look intentional next to each other. It ships tree-shakeable ESM and CommonJS builds with full TypeScript types and no runtime dependencies.
npm install krz-icons
import { Home, Bell, Wallet } from "krz-icons";The library is especially strong on domain-specific icons: logistics, fintech, healthcare, legal — categories that generic libraries leave thin.
Browse the full krz-icons library →
2. Lucide React
Icons: ~1 500 · License: ISC · Variants: Outline only
Lucide is a community fork of Feather icons. It has excellent design quality and a very active community. The icon count is much smaller than krz-icons, but every icon is carefully crafted. Good choice for minimal interfaces that do not need specialist icons.
npm install lucide-react
import { Home, Bell } from "lucide-react";3. Heroicons
Icons: ~300 · License: MIT · Variants: Outline, solid, mini, micro
Made by the Tailwind Labs team, Heroicons is the go-to if you are building with Tailwind CSS. The icon count is intentionally small — the team focuses on a curated set. You will hit the ceiling on a large app, but the quality is superb and the Tailwind integration is seamless.
4. Phosphor Icons
Icons: ~9 000 · License: MIT · Variants: Thin, light, regular, bold, fill, duotone
Phosphor has excellent variant coverage — six weights per icon. If your design spec calls for thin and bold variants of the same icon, Phosphor handles it well. The React package (@phosphor-icons/react) is tree-shakeable and typed.
5. React Icons
Icons: 200 000+ (aggregated) · License: Mixed
React Icons is not a library; it is an aggregator that wraps many different icon packs (Font Awesome, Material, Feather, etc.) in a consistent React API. The icon count is enormous, but mixing icons from different packs means inconsistent sizing, strokes, and visual weight. Bundle size is a serious concern if you use icons from multiple packs. Always check the license of the underlying pack.
Quick comparison
| Library | Icons | License | Tree-shake | Types |
|---|---|---|---|---|
| krz-icons | 20 000+ | MIT | Yes | Yes |
| Lucide React | ~1 500 | ISC | Yes | Yes |
| Heroicons | ~300 | MIT | Yes | Yes |
| Phosphor | ~9 000 | MIT | Yes | Yes |
| React Icons | 200 000+ | Mixed | Partial | Partial |
Which one should you pick?
If you need the widest possible icon coverage with full consistency and MIT licensing, krz-icons is the answer. If you are building a small Tailwind project and only need a handful of general-purpose icons, Heroicons or Lucide are great for their simplicity. If your design calls for multiple stroke weights, Phosphor is worth evaluating.