Free SVG Icons for Vue.js

Vue.js applications benefit from SVG icons delivered as single-file components — they are tree-shakeable, server-render cleanly with Nuxt, and accept props for size, colour, and stroke width. Most popular packs ship official Vue wrappers: Lucide Vue Next, Heroicons Vue, Phosphor Vue, and more. This collection highlights the packs with first-class Vue support plus guidance on using the Iconify Vue component for access to every pack in one dependency.

8 icon packs · 32,609 total icons · Free & open source

Icon Packs

Lucide

1,641 icons ISC

HeroIcons

1,288 icons MIT

Phosphor

9,072 icons MIT

Tabler Icons

5,963 icons MIT

Remix Icon

3,135 icons Apache-2.0

Carbon

2,392 icons Apache-2.0

Material Design Icons

7,447 icons Apache-2.0

Iconoir

1,671 icons MIT

Common Use Cases

1 Vue 3 SPA navigation and action buttons

2 Nuxt server-rendered pages with inline SVG icons

3 Vue component libraries and design systems

4 Admin panels built with Vue and Vuetify or PrimeVue

5 Vue-based e-commerce storefronts

Frequently Asked Questions

Install a Vue icon package (e.g. lucide-vue-next, @heroicons/vue) and import icons as components. Alternatively, use @iconify/vue for access to 200,000+ icons from any pack with a single dependency.

Yes. Packages like Lucide Vue Next and Heroicons Vue export each icon as a named component, so your bundler includes only the icons you actually import — keeping the final bundle small.

Any pack with a Vue wrapper works well with Nuxt. The Nuxt Icon module (based on Iconify) is particularly convenient — it auto-imports icons from any Iconify collection and supports SSR out of the box.