---
title: "Configuration"
description: "Every option of the icon key in your Nuxt config."
canonical_url: "https://nuxt-git-feat-module-docs-nuxt-js.vercel.app/modules/icon/configuration"
---
# Configuration

> Every option of the icon key in your Nuxt config.

Configure Nuxt Icon with the `icon` key in your `nuxt.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    mode: 'css',
    cssLayer: 'base'
  }
})
```

## Options

| Option               | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`               | `undefined`                    | **Icon Size** — Set the default icon size.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `class`              | `''`                           | **CSS Class** — Set the default CSS class.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `mode`               | `'css'`                        | **Default Rendering Mode** — Set the default rendering mode for the icon component                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `aliases`            | `{}`                           | **Icon aliases** — Define Icon aliases to update them easily without code changes.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `cssSelectorPrefix`  | `'i-'`                         | **CSS Selector Prefix** — Set the default CSS selector prefix.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `cssLayer`           | `undefined`                    | **CSS Layer Name** — Set the default CSS `@layer` name.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `cssWherePseudo`     | `true`                         | **Use CSS `:where()` Pseudo Selector** — Use CSS `:where()` pseudo selector to reduce specificity.                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collections`        | `null`                         | **Icon Collections** — List of known icon collections name. Used to resolve collection name ambiguity. e.g. `simple-icons-github` -> `simple-icons:github` instead of `simple:icons-github` When not provided, will use the full Iconify collection list.                                                                                                                                                                                                                                                                  |
| `customCollections`  | `null`                         | **Custom Icon Collections**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `provider`           | `undefined`                    | **Icon Provider** — Provider to use for fetching icons - `server` - Fetch icons with a server handler - `iconify` - Fetch icons with Iconify API, purely client-side - `none` - Do not fetch icons (use client bundle only) `server` by default; `iconify` when `ssr: false` Use `{ server, client }` to set a different provider for SSR and for the browser, e.g. `{ server: \'server\', client: \'iconify\' }`. A string is the same as setting both sides. Both `server` and `client` are required in the object form. |
| `iconifyApiEndpoint` | `'https://api.iconify.design'` | **Iconify API Endpoint URL** — Define a custom Iconify API endpoint URL. Useful if you want to use a self-hosted Iconify API. Learn more: <https://iconify.design/docs/api>.                                                                                                                                                                                                                                                                                                                                               |
| `fallbackToApi`      | `true`                         | **Fallback to Iconify API** — Fallback to Iconify API if server provider fails to found the collection.                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `localApiEndpoint`   | `'/api/_nuxt_icon'`            | **Local API Endpoint Path** — Define a custom path for the local API endpoint.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `fetchTimeout`       | `1500`                         | **Fetch Timeout** — Set the timeout for fetching icons.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `customize`          | `undefined`                    | **Customize callback** — Customize icon content (replace stroke-width, colors, etc...).                                                                                                                                                                                                                                                                                                                                                                                                                                    |


## Sitemap

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