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

category	type	title	toc
Components	General	Icon	false

Semantic vector graphics.

Icons naming convention

We provide semantic name for every icon, and naming rules are as follows:

• Scanning line icon has the similar name with its solid one，but it's distinguished by -o, for example, question-circle (a full circle) and question-circle-o (an empty circle);
• Naming sequence：[name]-[shape?]-[outline?]-[direction?].

? means is optional.

See more design detail at here.

List of icons

Click the icon and copy the code.

Directional Icons

import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="direction" />, mountNode);

Suggested Icons

import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);

Application Icons

import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);

Brand and Logos

import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);

API

Icon

Property	Description	Type	Default
type	Type of ant design icon	string	-
style	Style properties of icon, like fontSize and color	CSSProperties	-
svgStyle	Inline style to apply to the SVG element	CSSProperties	-
svgClassName	Define extra class name for the SVG element	string	-
spin	Rotate icon with animation	boolean	false
component	The component used for the root node. This will override the type property.	ComponentType<CustomIconComponentProps>	-

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' }} />

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
);

CustomIconComponentProps

The following properties are available fot 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	-

Icon.createFromIconfontCN(options)

This method is specified for iconfont.cn.

const MyIcon = Icon.createFromIconfontCN({
  namespace: 'foo', // identifier
  url: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi', // generated by iconfont.cn
  prefix: 'icon-',
});

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

It create a component that uses SVG sprites in essence.

The following options are available:

Property	Description	Type	Default
prefix	The prefix of the icon set. It ends with - generally, like icon-、foo-	string	''
extraCommonProps	Define extra properties to the component	{ [key: string]: any }	{}
namespace	The namespace of the icon set, used as identifier.	string	-
url	The URL generated by iconfont.cn project.	string	-

The property url should be set together with property namespace.

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