---
url: https://docs.youcan.shop/celeste-ui/icons/installation.md
---
# Icons Installation

## Install the icons

::: code-group

```bash [npm]
npm install @youcan/celeste-icons
```

```bash [yarn]
yarn add @youcan/celeste-icons
```

```bash [pnpm]
pnpm add @youcan/celeste-icons
```

```bash [bun]
bun add @youcan/celeste-icons
```

:::

## Set Up UnoCSS

We use `unocss` as the engine that provides our icons to our users. Therefore, to be able to use the icons you must first install `unocss` in your project. Follow the steps below for Vite and Nuxt 3 setups.

### Setup with Vite

1. Install `UnoCSS` as a development dependency:

```bash
npm install -D unocss
```

2. Add UnoCSS to your `vite.config.ts` file to enable its functionality:

```ts
// vite.config.ts
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS()],
});
```

3. Include UnoCSS in the top level of your application:

```bash
  import 'uno.css';
```

### Setup with Nuxt 3

1. Add UnoCSS and its Nuxt integration to your project:

```bash
npm install -D unocss @unocss/nuxt
```

2. Update your `nuxt.config.ts` file to include UnoCSS and necessary styles:

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  css: ["@youcan/celeste-tokens/tokens.css", "@youcan/celeste/assets/celeste.css"],
});
```

## Configure UnoCSS

To configure UnoCSS, Create a `uno.config.ts` in your project root folder and register the icons preset:

```ts
// uno.config.ts
import { defineConfig, presetAttributify, presetIcons } from 'unocss';
import CelesteIconsInfo from '@youcan/celeste-icons/info.json';
import CelesteIcons from '@youcan/celeste-icons/icons.json';

export default defineConfig({
  presets: [
    presetAttributify(),
    presetIcons({
      warn: true,
      extraProperties: {
        width: '20px',
        height: '20px',
        display: 'block',
      },
      collections: {
        [CelesteIconsInfo.prefix || 'youcan']: () => CelesteIcons,
      },
    }),
  ],
});
```

## Safelisting Icon Classes

To ensure that all necessary icon classes are retained and not removed during build processes, add them to the safelist array in the UnoCSS configuration file `unocss.config.ts`. This prevents purging of these classes, ensuring they remain available for use in your application.

```ts
// uno.config.ts
import { defineConfig, presetAttributify, presetIcons } from 'unocss';
import CelesteIconsInfo from '@youcan/celeste-icons/info.json';
import CelesteIcons from '@youcan/celeste-icons/icons.json';

export default defineConfig({
  presets: [
    presetAttributify(),
    presetIcons({
      warn: true,
      extraProperties: {
        width: '20px',
        height: '20px',
        display: 'block',
      },
      collections: {
        [CelesteIconsInfo.prefix || 'youcan']: () => CelesteIcons,
      },
    }),
  ],
  safelist: [
    ...Object.keys(CelesteIcons.icons).map(key => `i-${CelesteIcons.prefix}:${key}`),
  ],
});
```