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-heroicons-light-bulb" 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-heroicons-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: {
      chevronDoubleLeft: 'i-heroicons-chevron-double-left-20-solid',
      chevronDoubleRight: 'i-heroicons-chevron-double-right-20-solid',
      chevronDown: 'i-heroicons-chevron-down-20-solid',
      chevronLeft: 'i-heroicons-chevron-left-20-solid',
      chevronRight: 'i-heroicons-chevron-right-20-solid',
      check: 'i-heroicons-check-20-solid',
      close: 'i-heroicons-x-mark-20-solid',
      ellipsis: 'i-heroicons-ellipsis-horizontal-20-solid',
      external: 'i-heroicons-arrow-up-right-20-solid',
      loading: 'i-heroicons-arrow-path-20-solid',
      minus: 'i-heroicons-minus-20-solid',
      search: 'i-heroicons-magnifying-glass-20-solid'
    }
  }
})