# Integrate with Vue

> Install and use Univer Icons in Vue 3 projects.

- Human documentation: [https://docs.univer.ai/guides/icons/vue](https://docs.univer.ai/guides/icons/vue)

- Agent Markdown: [https://docs.univer.ai/guides/icons/vue.md](https://docs.univer.ai/guides/icons/vue.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [icons/vue.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/vue.mdx)

---

Add Univer Icons to your Vue 3 interface, then adjust their size and colors to match the surrounding controls.

## Install the package

In your Vue 3 project, install the icon package:

#### npm

```bash
npm install @univerjs/icons-vue
```

#### pnpm

```bash
pnpm add @univerjs/icons-vue
```

#### yarn

```bash
yarn add @univerjs/icons-vue
```

#### bun

```bash
bun add @univerjs/icons-vue
```

## Add an icon to a button

Find a component in the [icon preview](https://docs.univer.ai/guides/icons/all-icons.md) and import it by name. This copy button shows a text label alongside its icon.

```vue
<script setup lang="ts">
import { CopyIcon } from '@univerjs/icons-vue'

const emit = defineEmits<{ copy: [] }>()
</script>

<template>
  <button type="button" @click="emit('copy')">
    <CopyIcon aria-hidden="true" />
    <span>Copy</span>
  </button>
</template>
```

Handle the `copy` event in the parent component. The icon is decorative because the visible text already names the action.

## Set size and color

Icons inherit the surrounding text color and use `1em` for their size. Set `fontSize` and `color` on the icon to give it a different appearance:

```vue
<script setup lang="ts">
import { AddImageIcon } from '@univerjs/icons-vue'
</script>

<template>
  <AddImageIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
  />
</template>
```

## Set both colors of a two-color icon

For a two-color icon, set the main color with `color` and the accent with `extend.colorChannel1`. This example uses dark gray with a light gray accent:

```vue
<script setup lang="ts">
import { PaintBucketDoubleIcon } from '@univerjs/icons-vue'
</script>

<template>
  <PaintBucketDoubleIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
    :extend="{ colorChannel1: '#d4d4d8' }"
  />
</template>
```

Multicolor icons, including brand logos, can contain fixed colors. These settings do not replace every color in those icons.

## Keep strokes thin when enlarging icons

If an enlarged icon looks too heavy, try `preserveStrokeWidth`. Supported strokes stay as thin as they are at 16 × 16. Filled shapes are unaffected. Use the stroke control in the preview to check the result before applying it.

```vue
<script setup lang="ts">
import { ShapePieIcon } from '@univerjs/icons-vue'
</script>

<template>
  <ShapePieIcon
    aria-hidden="true"
    preserve-stroke-width
    style="font-size: 48px"
  />
</template>
```

## Give icon-only buttons a name

If you remove the visible button text, add `aria-label="Copy"` to the button and keep `aria-hidden="true"` on the icon. This lets screen readers announce the action.

To ask an AI Agent to find an icon and write the integration code, connect [MCP](https://docs.univer.ai/guides/icons/ai.md).