Icon

Semantic vector graphics.

How to use

Icons come from @ant-design/icons@6.x. It is not a peer of this library — it arrives with the pinned runtime, which depends on it, so it is already installed and its version is fixed with the rest of the runtime. Import icon components from @ant-design/icons; they inherit the current text colour and therefore the active Skin.

Examples

Basic

Import outlined, filled, and two-tone icons and use spin for animation.

Two-tone icon and colorful icon

Set twoToneColor to a specific primary color.

Custom Icon

Create reusable icons from SVG components.

Use iconfont.cn

Use iconfont.cn resources through createFromIconfontCN.

Multiple resources from iconfont.cn

Compose multiple iconfont resources in array order.

API

Common icons accept standard SVG attributes plus spin, rotate, twoToneColor, component, and style. createFromIconfontCN creates icon components backed by one or more iconfont resources.

Common Icon

Property	Description	Type	Default	Version
`className`	The className of Icon	`string`	`-`	—
`rotate`	Rotate by n degrees (not working in IE9)	`number`	`-`	—
`spin`	Rotate icon with animation	`boolean`	`false`	—
`style`	The style properties of icon, like fontSize and color	`CSSProperties`	`-`	—
`twoToneColor`	Only supports the two-tone icon. Specify the primary color, or primary and secondary colors	`string \| \[string, string]`	`-`	—

Custom Icon

Property	Description	Type	Default	Version
`component`	The component used for the root node	`ComponentType<CustomIconComponentProps>`	`-`	—
`rotate`	Rotate degrees (not working in IE9)	`number`	`-`	—
`spin`	Rotate icon with animation	`boolean`	`false`	—
`style`	The style properties of icon, like fontSize and color	`CSSProperties`	`-`	—

Custom Font Icon

Property	Description	Type	Default	Version
`extraCommonProps`	Define extra properties to the component	`{ \[key: string]: any }`	`{}`	—
`scriptUrl`	The URL generated by iconfont.cn project. Support string[] after @ant-design/icons@4.1.0	`string \| string\[]`	`-`	—

Custom SVG Icon

Property	Description	Type	Default	Version
`className`	The computed class name of the svg element	`string`	`-`	—
`fill`	Define the color used to paint the svg element	`string`	`currentColor`	—
`height`	The height of the svg element	`string \| number`	`1em`	—
`style`	The computed style of the svg element	`CSSProperties`	`-`	—
`width`	The width of the svg element	`string \| number`	`1em`	—

Choose icons by meaning and provide an accessible label for icon-only actions.

Don't

Use a decorative icon as the only explanation for an unfamiliar operation.