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.
1. Vue 3 Composition API & Dynamic Component Patterns
In modern Vue 3, icons are imported as functional SFC components that accept reactive props:
<!-- 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>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.