---
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>
  <UIcon 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>
  <UButton icon="i-lucide-sun" variant="subtle">
    Button
  </UButton>
</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.

Installing the collection also lets Nuxt UI embed the icons it uses into the client bundle at build time, so they're available on first render instead of being loaded on demand at runtime. This happens automatically for Nuxt UI's own icons, from the `lucide` collection by default. To bundle other icons, such as ones you override or use elsewhere in your app, add them to `@nuxt/icon`'s [`clientBundle.icons`](https://github.com/nuxt/icon?tab=readme-ov-file#client-bundle) option or enable `clientBundle.scan`.

> [!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.*

> [!NOTE]
> 
> Icons you override in `app.config.ts` are loaded on demand at runtime rather than embedded in the client bundle. To bundle them too, add them in `{collection}:{name}` form (for example `lucide:rocket`) to `@nuxt/icon`'s [`clientBundle.icons`](https://github.com/nuxt/icon?tab=readme-ov-file#client-bundle) in your `nuxt.config.ts`.


## Sitemap

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