--- category: Components type: General title: Icon toc: false --- Semantic vector graphics. ## List of icons ```__react import IconDisplay from 'site/theme/template/IconDisplay'; ReactDOM.render(, mountNode); ``` ## API ### Common Icon | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | | | spin | Rotate icon with animation | boolean | false | | | rotate | Rotate by n degrees (not working in IE9) | number | - | | | twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | | We still have three different themes for icons, icon component name is the icon name suffixed by the theme name. ```jsx import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons'; ``` ### Custom Icon | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | | | spin | Rotate icon with animation | boolean | false | | | rotate | Rotate degrees (not working in IE9) | number | - | | | component | The component used for the root node. | ComponentType | - | | ### About SVG icons We introduced SVG icons in version `3.9.0`, replacing font icons. This has the following benefits: - 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 More discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353). > ⚠️ 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. > > While you wait, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from the community to chunk the icon file. The properties `theme`, `component` and `twoToneColor` were added in `3.9.0`. The best practice is to pass the property `theme` to every `` component. ```jsx import { MessageOutlined } from '@ant-design/icons'; ; ``` All the icons will render to ``. You can still set `style` and `className` for size and color of icons. ```jsx ``` ### Set TwoTone Color <<<<<<< HEAD When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color. ======= When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to specify the primary color. > > > > > > > origin/master ```jsx import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons'; setTwoToneColor('#eb2f96'); getTwoToneColor(); // #eb2f96 ``` ### Custom Font Icon We added a `createFromIconfontCN` function to help developer use their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way. > This method is specified for [iconfont.cn](http://iconfont.cn/). ```js import { createFromIconfontCN } from '@ant-design/icons'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成 }); ReactDOM.render(, mountedNode); ``` It creates a component that uses SVG sprites in essence. The following options are available: | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | 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 to import the SVG sprite symbols. See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`. ### Custom SVG Icon 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). ```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 '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file. ReactDOM.render(, mountNode); ``` The following properties are available for the component: | Property | Description | Type | Readonly | Version | | --- | --- | --- | --- | --- | | 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 | - | |