Integrate with Vue

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:

pnpm add @univerjs/icons-vue

npm install @univerjs/icons-vue

yarn add @univerjs/icons-vue

bun add @univerjs/icons-vue

Add an icon to a button

Find a component in the icon preview and import it by name. This copy button shows a text label alongside its icon.

<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:

<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:

<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.

<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.