Every major open-source icon library ships a first-party React package, so the decision is about coverage and style rather than integration.
| Library | Icons | Variants | Grid | License | Package |
|---|---|---|---|---|---|
| Lucide Icons | 1,979 | outline only | 24×24 | ISC | lucide-react |
| Heroicons | 1,297 | outline and solid | 16/20/24 | MIT | @heroicons/react |
| Phosphor Icons | 9,198 | thin, light, regular, bold, fill and duotone | 24×24 | MIT | phosphor-react |
| Tabler Icons | 6,324 | outline only | 24×24 | MIT | @tabler/icons-react |
| Material Design Icons | 14,001 | outlined, rounded, sharp, two-tone and filled | 24×24 | Apache 2.0 | @mui/icons-material |
All of these packages tree-shake, so shipping ten icons costs roughly ten icons' worth of JavaScript — not the whole library. Import named exports rather than the namespace to keep that guarantee.
For most React projects, start with
Lucide Icons — 1,979 icons,
outline only, ISC licensed, installed as
lucide-react. Move to
Heroicons if you need
outline and solid instead.
Lucide Icons is the safest default: 1,979 icons, ISC licensed, and a first-party package. All of these packages tree-shake, so shipping ten icons costs roughly ten icons' worth of JavaScript — not the whole library. Import named exports rather than the namespace to keep that guarantee.
Only if you import the whole set. Every library here tree-shakes, so bundling ten named icon exports ships ten icons. Watch for barrel imports like import * as Icons from "...", which defeat that.
Yes, and for small numbers of icons it is often better — no dependency, no version drift, and full control over attributes. Export any icon from IconStash as an inline SVG or a downloadable file and paste it straight in.