Icon
Icon
Semantic vector graphics.
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Before using icons, you need to install the @ant-design/icons package:
npm install @ant-design/icons --save
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| className | The className of Icon | string | - | |
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | The style properties of icon, like fontSize and color | CSSProperties | - | |
| 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.
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';<StarOutlined /><StarFilled /><StarTwoTone twoToneColor="#eb2f96" />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| component | The component used for the root node | ComponentType<CustomIconComponentProps> | - | |
| 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 | - |
We introduced SVG icons in version 3.9.0, replacing font icons. This has the following benefits:
More discussion of SVG icon reference at #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 for updates.
While you wait, you can use webpack plugin 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 <Icon /> component.
import { MessageOutlined } from '@ant-design/icons';<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
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' }} theme="outlined" />
When using the two-tone icons, you can use the static methods getTwoToneColor() and setTwoToneColor(colorString) to specify the primary color.
import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';setTwoToneColor('#eb2f96');getTwoToneColor(); // #eb2f96
We added a createFromIconfontCN function to help developer use their own icons deployed at iconfont.cn in a convenient way.
This method is specified for iconfont.cn.
import React from 'react';import { createFromIconfontCN } from '@ant-design/icons';import ReactDOM from 'react-dom/client';const MyIcon = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn});ReactDOM.createRoot(mountNode).render(<MyIcon type="icon-example" />);
It creates a component that uses SVG sprites in essence.
The following options are available:
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| extraCommonProps | Define extra properties to the component | { [key: string]: any } | {} | |
| scriptUrl | The URL generated by iconfont.cn project. Support string[] after @ant-design/icons@4.1.0 | string | string[] | - |
The property scriptUrl should be set to import the SVG sprite symbols.
See iconfont.cn documents to learn about how to generate scriptUrl.
You can import SVG icon as a react component by using webpack and @svgr/webpack. @svgr/webpack's options reference.
// webpack.config.jsmodule.exports = {// ... other configtest: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: [{loader: 'babel-loader',},{loader: '@svgr/webpack',options: {babel: false,icon: true,},},],};
You can import SVG icon as a react component by using vite and vite-plugin-svgr. @svgr/webpack's options reference.
// vite.config.jsexport default defineConfig(() => ({// ... other configplugins: [svgr({ svgrOptions: { icon: true } })],}));
import React from 'react';import Icon from '@ant-design/icons';import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.// import MessageSvg from 'path/to/message.svg?react'; // use vite path to your '*.svg?react' file.import ReactDOM from 'react-dom/client';// in create-react-app:// import { ReactComponent as MessageSvg } from 'path/to/message.svg';ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
The following properties are available for the component:
| Property | Description | Type | Readonly | Version |
|---|---|---|---|---|
| className | The computed class name of the svg element | string | - | |
| fill | Define the color used to paint the svg element | string | currentColor | |
| height | The height of the svg element | string | number | 1em | |
| style | The computed style of the svg element | CSSProperties | - | |
| width | The width of the svg element | string | number | 1em |
Import icons from @ant-design/icons, component name of icons with different theme is the icon name suffixed by the theme name. Specify the spin property to show the spinning animation.
Create a reusable React component by using <Icon component={...} />. The property component takes a React component that renders to a svg element.
You can use scriptUrl as an array after @ant-design/icons@4.1.0, to manage icons in one <Icon /> from multiple iconfont.cn resources. If an icon with a duplicate name is in resources, it will be overridden in array order.
You can set the twoToneColor prop to a specific primary color for two-tone icons.
If you are using iconfont.cn, you can use the icons in your project gracefully.
