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

---
category: Components
type: General
title: Icon
toc: false
---

Semantic vector graphics.

## List of icons

> Click the icon and copy the code.

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

## API

### Icon

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

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.

```jsx
<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.

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

You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).

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

```jsx
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 | - |


#### Use custom icon with iconfont.cn

##### Icon.createFromIconfontCN(options)

This method is specified for [iconfont.cn](http://iconfont.cn/).

```js
const MyIcon = Icon.createFromIconfontCN({
  namespace: 'foo', // identifier
  scriptUrl: '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 |
| --- | --- | --- | --- |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |

The property `scriptUrl` should be set together with property `namespace`.

See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.