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:

name

class

<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:

icon

<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',
      chevronUp: 'i-lucide-chevron-up',
      close: 'i-lucide-x',
      ellipsis: 'i-lucide-ellipsis',
      external: 'i-lucide-arrow-up-right',
      loading: 'i-lucide-refresh-cw',
      minus: 'i-lucide-minus',
      plus: 'i-lucide-plus',
      search: 'i-lucide-search'
    }
  }
})

app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      caution: 'i-lucide-circle-alert',
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check',
      dark: 'i-lucide-moon',
      file: 'i-lucide-file-text',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      external: 'i-lucide-arrow-up-right',
      hash: 'i-lucide-hash',
      light: 'i-lucide-sun',
      menu: 'i-lucide-menu',
      note: 'i-lucide-info',
      system: 'i-lucide-monitor',
      tip: 'i-lucide-lightbulb',
      warning: 'i-lucide-triangle-alert',
      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',
      chevronUp: 'i-lucide-chevron-up',
      close: 'i-lucide-x',
      ellipsis: 'i-lucide-ellipsis',
      loading: 'i-lucide-refresh-cw',
      minus: 'i-lucide-minus',
      plus: 'i-lucide-plus',
      search: 'i-lucide-search'
    }
  }
})

Nuxt UI Pro v3 does not support Vue yet.

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',
          chevronUp: 'i-lucide-chevron-up',
          close: 'i-lucide-x',
          ellipsis: 'i-lucide-ellipsis',
          external: 'i-lucide-arrow-up-right',
          loading: 'i-lucide-refresh-cw',
          minus: 'i-lucide-minus',
          plus: 'i-lucide-plus',
          search: 'i-lucide-search'
        }
      }
    })
  ]
})