Icons
Nuxt UI integrates with Iconify to access over 200,000+ icons.
Usage
Icon Component
You can use the Icon component with a name prop to display an icon:
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
You can use any name from the https://icones.js.org collection.
Component Props
Some components also have an icon prop to display an icon, like the Button for example:
<template>
<UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>
Theme
You can change the default icons used by Nuxt UI components in your vite.config.ts:
app.config.ts
export default defineAppConfig({
ui: {
icons: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
check: 'i-lucide-check',
chevronDoubleLeft: 'i-lucide-chevrons-left',
chevronDoubleRight: 'i-lucide-chevrons-right',
chevronDown: 'i-lucide-chevron-down',
chevronLeft: 'i-lucide-chevron-left',
chevronRight: 'i-lucide-chevron-right',
close: 'i-lucide-x',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
loading: 'i-lucide-refresh-ccw',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
chevronUp: 'i-lucide-chevron-up'
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
icons: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
check: 'i-lucide-check',
chevronDoubleLeft: 'i-lucide-chevrons-left',
chevronDoubleRight: 'i-lucide-chevrons-right',
chevronDown: 'i-lucide-chevron-down',
chevronLeft: 'i-lucide-chevron-left',
chevronRight: 'i-lucide-chevron-right',
close: 'i-lucide-x',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
loading: 'i-lucide-refresh-ccw',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
chevronUp: 'i-lucide-chevron-up'
}
}
})
]
})