Icon

Semantic vector graphics.

How to use

Before use icons, you need to install @ant-design/icons package:

npm

yarn

pnpm

npm install @ant-design/icons --save

List of icons

Examples

Basic

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 spinning animation.

Custom Icon

Create a reusable React component by using <Icon component={...} />. The property component takes a React component that renders to svg element.

Multiple resources from iconfont.cn

You can use scriptUrl as an array after @ant-design/icons@4.1.0, manage icons in one <Icon /> from multiple iconfont.cn resources. If icon with a duplicate name in resources, it will overridden in array order.

Two-tone icon and colorful icon

You can set twoToneColor prop to specific primary color for two-tone icons.

Use iconfont.cn

If you are using iconfont.cn, you can use the icons in your project gracefully.

API

Common Icon

Property	Description	Type	Default
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" />

Custom Icon

Property	Description	Type	Default
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	-

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.

⚠️ 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" />

Set TwoTone Color

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

Custom Font Icon

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 ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';

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.

Custom SVG Icon

You can import SVG icon as a react component by using webpack and @svgr/webpack. @svgr/webpack's options reference.

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
// 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
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`

Namu Design

Icon

Namu Design

Icon

How to use

List of icons

Examples

API

Common Icon

Custom Icon

About SVG icons

Set TwoTone Color

Custom Font Icon

Custom SVG Icon

Design Token

How to use

List of icons

Directional Icons

Suggested Icons

Editor Icons

Data Icons

Brand and Logos

Application Icons

Examples

API

Common Icon

Custom Icon

About SVG icons

Set TwoTone Color

Custom Font Icon

Custom SVG Icon

Design Token

Directional Icons

Suggested Icons

Editor Icons

Data Icons

Brand and Logos

Application Icons