Next.js adds one real constraint on top of React: icons are usually server-rendered, so the package has to avoid client-only hooks.
| 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 |
| Radix Icons | 345 | outline only | 15×15 | MIT | @radix-ui/react-icons |
Prefer packages that render plain SVG on the server. If a component is marked "use client", inline SVG from IconStash avoids the boundary entirely and is the fastest option for above-the-fold icons.
For most Next.js 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. Prefer packages that render plain SVG on the server. If a component is marked "use client", inline SVG from IconStash avoids the boundary entirely and is the fastest option for above-the-fold icons.
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.