---
title: "Icons"
description: "Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify."
canonical_url: "https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt"
---
# Icons

> Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.

> [!NOTE]
> See: /docs/getting-started/integrations/icons/vue
> 
> Looking for the **Vue** version?

## Usage

Nuxt UI automatically registers the [`@nuxt/icon`](https://github.com/nuxt/icon) module for you, so there's no additional setup required.

### Icon component

You can use the [Icon](/docs/components/icon) component with a `name` prop to display an icon:

```vue
<template>
  <UIcons name="i-lucide-lightbulb" class="size-5" />
</template>
```

> [!NOTE]
> 
> You can use any name from the [https://iconify.design](https://iconify.design) collection. Browse them easily on [https://icones.js.org](https://icones.js.org) or search directly from your AI assistant using the [`search_icons`](/docs/getting-started/ai/mcp#available-tools) MCP tool.

### Component props

Some components also have an `icon` prop to display an icon, like the [Button](/docs/components/button) for example:

```vue
<template>
  <UIcons icon="i-lucide-sun" variant="subtle">
    Button
  </UIcons>
</template>
```

## Collections

### Iconify dataset

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

```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 its 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]
> See: https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset
> 
> 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, `./app/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'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons'
    }]
  }
})
```

Then you can use the icons like this:

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

> [!NOTE]
> See: https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections
> 
> Read more about this in the `@nuxt/icon` documentation.

## Theme

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



*See the interactive theme picker on the documentation website.*


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.