---
description: ''
navigation:
  badge:
    label: Todo
---

Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), add 200,000+ ready to use icons to your Nuxt application based on [Iconify](https://iconify.design).

You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:

- any `icon` prop available across the components:

```vue
<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>
```

- the `UIcon` component to use icons anywhere:

```vue
<template>
  <UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
</template>
```

### Collections

It's highly recommended to install the icons collections 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.

::callout{icon="i-heroicons-light-bulb" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
Read more about custom collections in the `@nuxt/icon` documentation.
::

## Theme

:icons-theme