Basic · Icon
Icon
Semantic vector graphics.

Icon List

Accessibility  
Alert  
Arrow  
Basic  
Brands  
Building  
Business  
Code  
Communication  
Device  
Files&Folder  
Interface  
Layout  
Music  
Objects  
Photo&Video  
Time  
User  
Writing  

Colorful Icons

Common  

Demos

How to import

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

API reference

Icon

PropertiesIllustrateTypeDefault
classNameclass namestringnone
onClickCallback event of clicking the icon(e: Event) => voidNone
onMouseDownThe callback event of mouse button press >=v1.21(e: Event) => voidNone
onMouseEnterCallback event of entering icon(e: Event) => voidNone
onMouseLeaveCallback event of leaving icon(e: Event) => voidNone
onMouseMoveCallback event of moving the mouse >=v1.21(e: Event) => voidNone
onMouseUpCallback event when the mouse button is raised >=v1.21(e: Event) => voidNone
rotatedegree of rotationnumber
sizeSize, supports inherit, extra-small, small, default, large, extra-largestringdefault
spinspin animationboolean
styleIcon styleCSSPropertiesNone
svgIcon contentReactNodeNone

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