---
title: "Usage"
description: "Render any of the 200,000+ Iconify icons, or your own Vue components."
canonical_url: "https://nuxt-git-feat-module-docs-nuxt-js.vercel.app/modules/icon/usage"
---
# Usage

> Render any of the 200,000+ Iconify icons, or your own Vue components.

**Props:**

- `name` (required): icon name or global component name
- `size`: icon size (default: `1em`)
- `mode`: icon rendering mode (`svg` or `css`, default: `css`)

**Attributes**:

When using an icon from Iconify, a `<span>` or `<svg>` will be created based on the rendering mode, you can give [all the attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) of the native element.

```html
<Icon name="uil:github" style="color: black" />
```

**TailwindCSS v4**:

When using TailwindCSS v4 with the `css` mode, you should configure the `cssLayer` in Nuxt's app config:

```ts
// ~/app.config.ts
export default defineAppConfig({
  icon: {
    mode: 'css',
    cssLayer: 'base'
  }
})
```

## Iconify Dataset

You can use any name from the <https://icones.js.org> collection:

```html
<Icon name="uil:github" />
```

It supports the `i-` prefix (for example, `i-uil-github`).

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

```bash
npm i -D @iconify-json/collection-name
```

For example, to use the `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]
> You may also know you can install `@iconify/json` package to include all iconify icons. This is not recommended because it will increase your server bundle size and building performance. If you choose to do so, we'd recommend to explicitly specify the collection names you need:
>
> ```ts
> export default defineNuxtConfig({
>   modules: ['@nuxt/icon'],
>   icon: {
>     serverBundle: {
>       collections: ['uil', 'mdi'] // <!--- this
>     }
>   }
> })
> ```

## Vue Component

When the `name` matches a global registered component, it will be rendered as that component (in this case `mode` will be ignored):

```html
<Icon name="MyComponent" />
```

Note that `MyComponent` needs to be inside `components/global/` folder (see [example](https://github.com/nuxt/icon/blob/main/playgrounds/nuxt/components/global/NuxtLogo.vue)).

> [!TIP]
> You can also change the component name with:
>
> ```ts
> export default defineNuxtConfig({
>   icon: {
>     componentName: 'NuxtIcon'
>   }
> })
> ```

## Render Function

You can use the `Icon` component in a render function (useful if you create a functional component), for this you can import it from `#components`:

```ts
import { Icon } from '#components'
```

See an example of a `<MyIcon>` component:

```vue
<script setup>
import { Icon } from '#components'

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>
```


## Sitemap

See the full [sitemap](https://nuxt-git-feat-module-docs-nuxt-js.vercel.app/sitemap.md) for all pages.