ui/docs/content/1.getting-started/4.icons.md

title, description, links

title	description	links
Icons	Nuxt UI integrates with `@nuxt/icon` to access over 200,000+ icons from [Iconify](https://iconify.design/).	label to target icon nuxt/icon https://github.com/nuxt/icon _blank i-simple-icons-github

Usage

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

::note You can use any name from the https://icones.js.org collection. ::

Icon Component

You can use the Icon component with a name prop to display an icon:

::component-code

props: name: 'i-heroicons-light-bulb' class: 'size-5'

::

Component Props

Some components also have an icon prop to display an icon, like the Button for example:

::component-code

ignore:

• color
• variant props: icon: i-heroicons-sun variant: subtle slots: default: Button

---

::

Collections

Iconify Dataset

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

::code-group{sync="pm"}

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.

::note{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"} Read more about this in the @nuxt/icon documentation. ::

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>

::note{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"} Read more about this in the @nuxt/icon documentation. ::

Theme

You can change the default icons used by Nuxt UI components in your app.config.ts:

:icons-theme