Univer Icons

What is Univer Icons

@univerjs/icons is the official Univer icon package. It provides tree-shakable React icon components for office-style UI.

Installation

npm install @univerjs/icons

Usage

Basic

import { SaveIcon, SearchIcon } from '@univerjs/icons'

export function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <SaveIcon />
      <SearchIcon />
    </div>
  )
}

Control Size and Color

import { SaveIcon } from '@univerjs/icons'

export function Example() {
  return <SaveIcon style={{ fontSize: '20px', color: '#2563eb' }} />
}

Icons are based on 1em, so fontSize is the recommended way to scale icons.

Multi-Color Channel

Some icons support extend.colorChannel1:

import { PaintBucketDoubleIcon } from '@univerjs/icons'

export function ColorChannelDemo() {
  return (
    <PaintBucketDoubleIcon
      style={{ fontSize: '20px' }}
      extend={{ colorChannel1: '#ef4444' }}
    />
  )
}

Naming

Component name: PascalCase + Icon suffix, e.g. SaveIcon
Source SVG file name: kebab-case, e.g. save-icon.svg