Vue 3 Icons: Composition API & Nuxt 3 Guide (2026)
Integrate high-performance SVG icon libraries into Vue 3 and Nuxt 3 applications. Master <script setup> syntax, Vite tree-shaking, and SSR-safe dynamic components.
How do you use SVG icons in Vue 3 script setup and Nuxt 3 SSR?
In Vue 3 with <script setup>, icons are imported directly as functional components from packages like lucide-vue-next or @tabler/icons-vue. These components render static SVG elements that compile during Nuxt 3 server-side rendering with full hydration safety and zero client-side layout shifts. Reactive props such as :size, :color, and :stroke-width can be bound directly to component state, providing dynamic visual customization without DOM manipulation.
<!-- components/UserCard.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { User, Mail, CheckCircle2 } from 'lucide-vue-next'
const isVerified = ref(true)
</script>
<template>
<div class="flex items-center gap-4 p-4 rounded-xl border border-zinc-800 bg-zinc-900">
<User :size="24" class="text-zinc-400" />
<div class="flex-1">
<div class="flex items-center gap-1.5 font-medium">
<span>Alex Morgan</span>
<CheckCircle2 v-if="isVerified" :size="16" class="text-emerald-400" />
</div>
<p class="text-xs text-zinc-500">Engineering Lead</p>
</div>
</div>
</template>How do dynamic icon components work in Vue 3 without bundling unused icons?
To render dynamic icons in Vue 3 without inflating bundle size, avoid global component registration and use the <component :is="resolvedIcon" /> syntax with a restricted lookup dictionary. By mapping only allowable icon names to static imports or shallow references, Vite eliminates unreferenced icons from production bundles. The comparison table below compares key Vue 3 and Nuxt 3 compatible libraries:
| Library | Total Icons | License | TypeScript | Nuxt 3 SSR | Primary NPM Package |
|---|---|---|---|---|---|
| Lucide Icons | 1,960 | ISC | Native .d.ts | ✓ SSR Compatible | lucide-react |
| Heroicons | 324 | MIT | Native .d.ts | ✓ SSR Compatible | @heroicons/react |
| Tabler Icons | 6,147 | MIT | Native .d.ts | ✓ SSR Compatible | @tabler/icons-react |
| Phosphor Icons | 1,533 | MIT | Native .d.ts | ✓ SSR Compatible | @phosphor-icons/react |
| Remix Icon | 3,229 | Apache 2.0 | Community | ✓ SSR Compatible | remixicon |
| Bootstrap Icons | 2,078 | MIT | Community | ✓ SSR Compatible | bootstrap-icons |
| Iconoir | 1,384 | MIT | Native .d.ts | ✓ SSR Compatible | iconoir-react |
| Octicons | 280 | MIT | Native .d.ts | ✓ SSR Compatible | @primer/octicons-react |
Verified Vue 3 Icon Libraries (13)
Vue 3 & Nuxt 3 Icon FAQ
How do I use Lucide icons in Vue 3 with script setup?
Install `lucide-vue-next` and import icons directly inside your `<script setup>` block: `import { Home, Settings } from "lucide-vue-next"`. You can render `<Home :size="20" class="text-emerald-500" />` with full TypeScript prop validation.
How do dynamic icon components work in Vue 3 without bundling unused icons?
In Vue 3, avoid dynamic global registrations. Instead, use dynamic component syntax `<component :is="resolvedIcon" />` with shallowRef or explicit lookup maps containing only the icons used in your application.
Are Vue 3 icon packages compatible with Nuxt 3 SSR?
Yes. Packages like `lucide-vue-next` and `@tabler/icons-vue` render static SVG markup that compiles on the server during Nuxt 3 SSR without hydration mismatch errors or client-side layout shifts.
How do I customize stroke width and default icon props globally in Vue 3?
You can create a custom Vue 3 plugin using `app.provide` or wrap the icon library in a custom `AppIcon.vue` base component that passes default `:stroke-width="1.75"` and `:size="20"` to child icon components.
Explore Svelte & Framework Guides
Discover Svelte 5, React, and TypeScript icon integrations.