ant-design/components/icon/index.en-US.md

category	type	title	toc
Components	General	Icon	false

Semantic vector graphics.

List of icons

Click the icon and copy the code.

We are still adding two-tone icons right now.

import IconDisplay from 'site/theme/template/IconDisplay';
ReactDOM.render(<IconDisplay />, mountNode);

API

Property	Description	Type	Default
type	Type of the ant design icon	string	-
style	Style properties of icon, like fontSize and color	CSSProperties	-
theme	Theme of the ant design icon	'filled' | 'outlined' | 'twoTone'	'outlined'
spin	Rotate icon with animation	boolean	false
component	The component used for the root node. This will override the type property.	ComponentType<CustomIconComponentProps>	-
twoToneColor	Only support the two-tone icon. Specific the primary color.	string (hex color)	-

Svg icons

We introduced svg icons in 3.9.x version replacing font icons which brings benefits below:

• Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
• Much more display accuracy in lower-level screens.
• Support multiple colors for icon.
• No need to change built-in icons with overriding styles by providing more props in component.

More disscussion of svg icon reference to #10353.

⚠️ About the extra bundle size brought by all svg icons we imported in antd@3.9.x, we will provide new API to allow developers importing icons as your need, you can trace #12011 for further progress.

The properties theme, component and twoToneColor are added in antd@3.9.x. The best practice is to pass the property theme to every <Icon /> components.

<Icon type="star" theme="filled" />

All the icons will render to <svg>. You can still set style and className for size and color of icons.

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

Set TwoTone Color

When using the two-tone icons, you can use the static methods Icon.getTwoToneColor() and Icon.setTwoToneColor(colorString) to spicify the primary color.

Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96

Custom Svg Icon

You can import svg icon as an react component by using webpack and @svgr/webpack. @svgr/webpack's options reference.

// webpack.config.js
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}

import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

ReactDOM.render(
  <Icon component={MessageSvg} />,
  mountNode
);

The following properties are available for the component:

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

Custom Font Icon

We added a createFromIconfontCN function to help developer using their own icons deployed at iconfont.cn in a convenient way.

This method is specified for iconfont.cn.

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

It create a component that uses SVG sprites in essence.

The following options are available:

Property	Description	Type	Default
scriptUrl	The URL generated by iconfont.cn project.	string	-
extraCommonProps	Define extra properties to the component	{ [key: string]: any }	{}

The property scriptUrl should be set to import the svg sprite symbols.

See iconfont.cn documents to learn about how to generate scriptUrl.