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