---
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"
last_updated: "2026-04-30"
---
# 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>
  <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.

> [!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>
  <UIcons icon="i-lucide-sun" variant="subtle">
    Button
  </UIcons>
</template>
```

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