2016-03-31 14:17:09 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: General
2016-09-08 16:53:50 +08:00
title: Icon
2023-02-20 10:51:18 +08:00
description: Semantic vector graphics.
2016-07-26 19:45:55 +08:00
toc: false
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-03-31 14:17:09 +08:00
---
2015-05-27 15:43:29 +08:00
2023-02-20 10:51:18 +08:00
## How to use
Before use icons, you need to install `@ant-design/icons` package:
2020-03-29 10:48:59 +08:00
```bash
npm install --save @ant -design/icons
```
2015-06-17 19:48:17 +08:00
2016-08-20 11:58:31 +08:00
## List of icons
2015-05-27 15:43:29 +08:00
2022-11-09 12:28:04 +08:00
< IconSearch > < / IconSearch >
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/two-tone.tsx" > Two-tone icon and colorful icon< / code >
< code src = "./demo/custom.tsx" > Custom Icon< / code >
< code src = "./demo/iconfont.tsx" > Use iconfont.cn< / code >
< code src = "./demo/scriptUrl.tsx" > Multiple resources from iconfont.cn< / code >
2016-03-07 11:58:14 +08:00
2017-03-19 14:12:58 +08:00
## API
2016-10-08 15:09:56 +08:00
2019-08-13 14:07:17 +08:00
### Common Icon
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2020-06-30 09:01:49 +08:00
| className | The className of Icon | string | - | |
2019-11-21 10:16:58 +08:00
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
2020-08-07 15:50:53 +08:00
| spin | Rotate icon with animation | boolean | false | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
2020-06-29 21:43:22 +08:00
| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | |
2018-08-20 14:00:51 +08:00
2019-08-13 14:07:17 +08:00
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
```jsx
2019-11-28 12:34:33 +08:00
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
2019-08-13 14:07:17 +08:00
2019-11-28 12:34:33 +08:00
< StarOutlined / >
2019-08-13 14:07:17 +08:00
< StarFilled / >
< StarTwoTone twoToneColor = "#eb2f96" / >
```
### Custom Icon
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2020-10-21 10:33:43 +08:00
| component | The component used for the root node | ComponentType< CustomIconComponentProps> | - | |
2020-08-07 15:50:53 +08:00
| 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 | - | |
2019-08-13 14:07:17 +08:00
### About SVG icons
2018-09-16 15:09:58 +08:00
2019-10-25 09:56:30 +08:00
We introduced SVG icons in version `3.9.0` , replacing font icons. This has the following benefits:
2018-09-16 15:09:58 +08:00
2019-10-25 09:56:30 +08:00
- Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)
- Much more display accuracy on lower-resolution screens
- The ability to choose icon color
- No need to change built-in icons with overriding styles by providing more props in component
2018-09-16 15:09:58 +08:00
2019-10-25 09:56:30 +08:00
More discussion of SVG icon reference at [#10353 ](https://github.com/ant-design/ant-design/issues/10353 ).
2018-09-16 15:09:58 +08:00
2019-10-25 09:56:30 +08:00
> ⚠️ Given the extra bundle size caused by all SVG icons imported in 3.9.0, we will provide a new API to allow developers to import icons as needed, you can track [#12011](https://github.com/ant-design/ant-design/issues/12011) for updates.
2019-03-14 15:39:51 +08:00
>
2019-10-25 09:56:30 +08:00
> While you wait, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from the community to chunk the icon file.
2018-09-16 15:09:58 +08:00
2019-10-25 09:56:30 +08:00
The properties `theme` , `component` and `twoToneColor` were added in `3.9.0` . The best practice is to pass the property `theme` to every `<Icon />` component.
2018-09-01 20:37:18 +08:00
```jsx
2019-11-28 12:34:33 +08:00
import { MessageOutlined } from '@ant-design/icons';
2019-08-13 14:07:17 +08:00
2019-11-28 12:34:33 +08:00
< MessageOutlined style = {{ fontSize: ' 16px ' , color: ' # 08c ' } } / > ;
2018-09-01 20:37:18 +08:00
```
2018-08-20 14:00:51 +08:00
All the icons will render to `<svg>` . You can still set `style` and `className` for size and color of icons.
```jsx
2018-09-01 20:37:18 +08:00
< Icon type = "message" style = {{ fontSize: ' 16px ' , color: ' # 08c ' } } theme = "outlined" / >
2018-08-20 14:00:51 +08:00
```
2018-09-16 15:09:58 +08:00
### Set TwoTone Color
2020-01-15 12:16:12 +08:00
When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to specify the primary color.
2018-09-02 19:32:01 +08:00
```jsx
2019-08-13 14:07:17 +08:00
import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96
2018-09-02 19:32:01 +08:00
```
2018-09-21 00:00:19 +08:00
### Custom Font Icon
2019-08-13 15:56:29 +08:00
We added a `createFromIconfontCN` function to help developer use their own icons deployed at [iconfont.cn ](http://iconfont.cn/ ) in a convenient way.
2018-09-21 00:00:19 +08:00
> This method is specified for [iconfont.cn](http://iconfont.cn/).
2023-01-10 11:44:06 +08:00
```jsx
import React from 'react';
2023-01-29 00:28:59 +08:00
import ReactDOM from 'react-dom/client';
2019-08-13 14:07:17 +08:00
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
2023-01-29 00:28:59 +08:00
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn
2018-09-21 00:00:19 +08:00
});
2023-01-29 00:28:59 +08:00
ReactDOM.createRoot(mountNode).render(< MyIcon type = "icon-example" / > );
2018-09-21 00:00:19 +08:00
```
2019-08-13 15:56:29 +08:00
It creates a component that uses SVG sprites in essence.
2018-09-21 00:00:19 +08:00
The following options are available:
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2020-08-07 15:50:53 +08:00
| extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} | |
2020-10-21 10:33:43 +08:00
| scriptUrl | The URL generated by [iconfont.cn ](http://iconfont.cn/ ) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string\[] | - | |
2018-09-21 00:00:19 +08:00
2018-09-28 14:45:35 +08:00
The property `scriptUrl` should be set to import the SVG sprite symbols.
2018-09-21 00:00:19 +08:00
See [iconfont.cn documents ](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code ) to learn about how to generate `scriptUrl` .
2018-09-28 14:45:35 +08:00
### Custom SVG Icon
2018-09-16 15:09:58 +08:00
2019-08-13 15:56:29 +08:00
You can import SVG icon as a 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 ).
2018-08-20 14:00:51 +08:00
```js
// webpack.config.js
2023-01-10 11:44:06 +08:00
module.exports = {
// ... other config
2018-08-20 14:00:51 +08:00
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'babel-loader',
},
{
loader: '@svgr/webpack',
options: {
babel: false,
icon: true,
},
},
],
2023-01-10 11:44:06 +08:00
};
2018-08-20 14:00:51 +08:00
```
2017-04-06 20:52:32 +08:00
```jsx
2023-01-29 00:28:59 +08:00
import React from 'react';
import ReactDOM from 'react-dom/client';
2019-08-13 14:07:17 +08:00
import Icon from '@ant-design/icons';
2018-08-20 14:00:51 +08:00
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
2020-05-15 12:37:17 +08:00
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';
2018-08-20 14:00:51 +08:00
2023-01-29 00:28:59 +08:00
ReactDOM.createRoot(mountNode).render(< Icon component = {MessageSvg} / > );
2017-04-06 20:52:32 +08:00
```
2018-09-02 18:04:07 +08:00
The following properties are available for the component:
2018-08-20 14:00:51 +08:00
2019-09-01 13:56:48 +08:00
| Property | Description | Type | Readonly | Version |
2019-07-11 14:14:33 +08:00
| --- | --- | --- | --- | --- |
2019-11-21 10:16:58 +08:00
| className | The computed class name of the `svg` element | string | - | |
2020-08-07 15:50:53 +08:00
| fill | Define the color used to paint the `svg` element | string | `currentColor` | |
| height | The height of the `svg` element | string \| number | `1em` | |
2019-11-21 10:16:58 +08:00
| style | The computed style of the `svg` element | CSSProperties | - | |
2020-08-07 15:50:53 +08:00
| width | The width of the `svg` element | string \| number | `1em` | |