---
title: Icons
description: 'Nuxt UI integrates with `@nuxt/icon` to access over 200,000+ icons from [Iconify](https://iconify.design/).'
links:
  - label: 'nuxt/icon'
    to: https://github.com/nuxt/icon
    target: _blank
    icon: 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](/components/icon) component with a `name` prop to display an icon:

::component-code{slug="icon"}
---
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](/components/button) for example:

::component-code{slug="button"}
---
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

```bash [pnpm]
pnpm i @iconify-json/{collection_name}
```

```bash [yarn]
yarn add @iconify-json/{collection_name}
```

```bash [npm]
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`:

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

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

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

Then you can use the icons like this:

```vue
<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