Icons

Usage

Nuxt UI automatically registers the @nuxt/icon module for you, so there's no additional setup required.

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>

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>

Collections

Iconify Dataset

It's highly recommended to install the icon data locally with:

pnpm i @iconify-json/{collection_name}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

For example, to use the i-uil-github icon, install it's collection with @iconify-json/uil. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.

Custom Local Collections

You can use local SVG files to create a custom Iconify collection.

For example, place your icons' SVG files under a folder of your choice, for example, ./assets/icons:

assets/icons
├── add.svg
└── remove.svg

In your nuxt.config.ts, add an item in icon.customCollections:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui'
  ],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './assets/icons'
    }]
  }
})

Then you can use the icons like this:

<template>
  <UIcon name="i-custom-add" />
</template>

Theme

You can change the default icons used by Nuxt UI components in your 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'
    }
  }
})