Icon

Icon List


Fill Icons
Stroked Icons
Accessibility  
Alert  
Arrow  
Basic  
Brands  
Building  
Business  
Code  
Communication  
Device  
Files&Folder  
Interface  
Layout  
Music  
Objects  
Photo&Video  
Time  
User  
Writing  
Basic  
Chart & Diagram  
Editor  
Magic Customized  
Colorful Icons
Common

Demos

How to import


import Icon, { IconHome } from '@douyinfe/semi-icons';

Basic usage

Import icons from the @douyinfe/semi-icons package

Rotate & Spin

Introduce icons from the @douyinfe/semi-icons package, with its own size, rotation, and spin functions

Size

You can change the font-size to change the icon size

The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports extra-small (8x8), small (12x12), default (16x16), large (20x20), extra-large (24x24), When size is specified as inherit, the icon size inherits the current context font size.

Color

The icon will automatically inherit the color property of the external container CSS You can also modify the color of the icon by setting style props to the Icon.

Custom icon

You can use custom icons to pass in Icon components Icon component supports size, rotate, spin and other attributes

Use svgr to convert svg files into ReactComponent

If the icons provided by Semi are not enough to meet business needs, you can also introduce custom icons through @svgr/webpack and use them as React components


// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

import { Icon } from '@douyinfe/semi-ui';
import StarIcon from './star.svg';

<Icon svg={<StarIcon />} />

API reference

Properties	Illustrate	Type	Default
className	class name	string	none
onClick	Callback event of clicking the icon	(e: Event) => void	None
onMouseDown	The callback event of mouse button press >=v1.21	(e: Event) => void	None
onMouseEnter	Callback event of entering icon	(e: Event) => void	None
onMouseLeave	Callback event of leaving icon	(e: Event) => void	None
onMouseMove	Callback event of moving the mouse >=v1.21	(e: Event) => void	None
onMouseUp	Callback event when the mouse button is raised >=v1.21	(e: Event) => void	None
rotate	degree of rotation	number
size	Size, supports `inherit`, `extra-small`, `small`, `default`, `large`, `extra-large`	string	`default`
spin	spin animation	boolean
style	Icon style	CSSProperties	None
svg	Icon content	ReactNode	None

Accessibility

ARIA

The Icon component role is img, and its aria-label defaults to the component's file name

The svg element inside Icon is a decorative element, and aria-hidden is set by default to prevent it from being read by screen readers