Tailwind projects have one obvious default and several strong alternatives, depending on whether you want utility-class sizing or components.
| Library | Icons | Variants | Grid | License | Package |
|---|---|---|---|---|---|
| Heroicons | 1,297 | outline and solid | 16/20/24 | MIT | @heroicons/react |
| Lucide Icons | 1,979 | outline only | 24×24 | ISC | lucide-react |
| Phosphor Icons | 9,198 | thin, light, regular, bold, fill and duotone | 24×24 | MIT | phosphor-react |
| Iconoir | 2,020 | outline only | 24×24 | MIT | iconoir-react |
Heroicons is built by the Tailwind team and its geometry is tuned to Tailwind's spacing scale, which is why it aligns so cleanly with utility classes. Size icons with w-* / h-* and colour them with text-*.
For most Tailwind CSS projects, start with
Heroicons — 1,297 icons,
outline and solid, MIT licensed, installed as
@heroicons/react. Move to
Lucide Icons if you need
outline only instead.
Heroicons is the safest default: 1,297 icons, MIT licensed, and a first-party package. Heroicons is built by the Tailwind team and its geometry is tuned to Tailwind's spacing scale, which is why it aligns so cleanly with utility classes. Size icons with w-* / h-* and colour them with text-*.
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.