Vue 3 support is good but patchier than React — check that the library publishes a dedicated Vue package rather than relying on a wrapper.
| 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 |
| Carbon Icons | 2,644 | outline only | 32×32 | Apache 2.0 | @carbon/icons-react |
Lucide publishes lucide-vue-next for Vue 3. Where a library has no official Vue build, Iconify's Vue component covers most sets from one dependency.
For most Vue 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. Lucide publishes lucide-vue-next for Vue 3. Where a library has no official Vue build, Iconify's Vue component covers most sets from one dependency.
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.