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

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

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

## Usage

### 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.

> [!WARNING]
> 
> When using collections with a dash (`-`), you need to separate the icon name from the collection name with a colon (`:`) as `@iconify/vue` does not handle this case like `@nuxt/icon`. For example, instead of `i-simple-icons-github` you need to write `i-simple-icons:github` or `simple-icons:github`.
> 
> Learn more about the [Iconify naming convention](https://iconify.design/docs/icon-components/vue/#icon).

### 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-lucide-lightbulb` icon, install its collection with `@iconify-json/lucide`.

Installing the collection lets Nuxt UI embed the icons it uses into your build, so they render straight away during SSR and work fully offline instead of being fetched from the Iconify API 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 the `icon.clientBundle.icons` option in your `vite.config.ts`:

```ts [vite.config.ts]
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
```

> [!NOTE]
> 
> You can use either the `i-{collection}-{name}` or `{collection}:{name}` form, for example `i-lucide-heart` or `lucide:heart`, and `i-material-symbols-menu` or `material-symbols:menu`. Install each collection you reference with `@iconify-json/{collection_name}`.

To bundle the icons you use without listing them one by one, enable `scan` instead. It scans your source for icon usages from your installed collections and bundles them, the same way `@nuxt/icon`'s `clientBundle.scan` works:

```ts [vite.config.ts]
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: true
        }
      }
    })
  ]
})
```

Icons whose collection is not installed still load from the Iconify API at runtime, so install each collection you use with `@iconify-json/{collection_name}`. To opt out of bundling entirely, set `icon.clientBundle` to `false`.

## Theme

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



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


## Sitemap

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