Integrate with React

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

Install the package

In your React project, install the icon package:

pnpm add @univerjs/icons

npm install @univerjs/icons

yarn add @univerjs/icons

bun add @univerjs/icons

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.

import { CopyIcon } from '@univerjs/icons'export function CopyButton({ onCopy }: { onCopy: () => void }) {  return (    <button type="button" onClick={onCopy}>      <CopyIcon aria-hidden="true" />      <span>Copy</span>    </button>  )}

Pass your copy handler through onCopy. 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:

import { AddImageIcon } from '@univerjs/icons'export function ImageToolIcon() {  return (    <AddImageIcon      aria-hidden="true"      style={{ fontSize: 20, color: '#27272a' }}    />  )}

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:

import { PaintBucketDoubleIcon } from '@univerjs/icons'export function FillToolIcon() {  return (    <PaintBucketDoubleIcon      aria-hidden="true"      style={{ fontSize: 20, color: '#27272a' }}      extend={{ colorChannel1: '#d4d4d8' }}    />  )}

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.

import { ShapePieIcon } from '@univerjs/icons'export function ShapeToolIcon() {  return (    <ShapePieIcon      aria-hidden="true"      preserveStrokeWidth      style={{ fontSize: 48 }}    />  )}

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.