Icon

Semantic vector graphics. Before use icons, you need to install @ant-design/icons package:

npm install --save @ant-design/icons

List of icons#

Directional Icons

  • StepBackwardOutlined
  • StepForwardOutlined
  • FastBackwardOutlined
  • FastForwardOutlined
  • ShrinkOutlined
  • ArrowsAltOutlined
  • DownOutlined
  • UpOutlined
  • LeftOutlined
  • RightOutlined
  • CaretUpOutlined
  • CaretDownOutlined
  • CaretLeftOutlined
  • CaretRightOutlined
  • UpCircleOutlined
  • DownCircleOutlined
  • LeftCircleOutlined
  • RightCircleOutlined
  • DoubleRightOutlined
  • DoubleLeftOutlined
  • VerticalLeftOutlined
  • VerticalRightOutlined
  • VerticalAlignTopOutlined
  • VerticalAlignMiddleOutlined
  • VerticalAlignBottomOutlined
  • ForwardOutlined
  • BackwardOutlined
  • RollbackOutlined
  • EnterOutlined
  • RetweetOutlined
  • SwapOutlined
  • SwapLeftOutlined
  • SwapRightOutlined
  • ArrowUpOutlined
  • ArrowDownOutlined
  • ArrowLeftOutlined
  • ArrowRightOutlined
  • PlayCircleOutlined
  • UpSquareOutlined
  • DownSquareOutlined
  • LeftSquareOutlined
  • RightSquareOutlined
  • LoginOutlined
  • LogoutOutlined
  • MenuFoldOutlined
  • MenuUnfoldOutlined
  • BorderBottomOutlined
  • BorderHorizontalOutlined
  • BorderInnerOutlined
  • BorderOuterOutlined
  • BorderLeftOutlined
  • BorderRightOutlined
  • BorderTopOutlined
  • BorderVerticleOutlined
  • PicCenterOutlined
  • PicLeftOutlined
  • PicRightOutlined
  • RadiusBottomleftOutlined
  • RadiusBottomrightOutlined
  • RadiusUpleftOutlined
  • RadiusUprightOutlined
  • FullscreenOutlined
  • FullscreenExitOutlined

Suggested Icons

  • QuestionOutlined
  • QuestionCircleOutlined
  • PlusOutlined
  • PlusCircleOutlined
  • PauseOutlined
  • PauseCircleOutlined
  • MinusOutlined
  • MinusCircleOutlined
  • PlusSquareOutlined
  • MinusSquareOutlined
  • InfoOutlined
  • InfoCircleOutlined
  • ExclamationOutlined
  • ExclamationCircleOutlined
  • CloseOutlined
  • CloseCircleOutlined
  • CloseSquareOutlined
  • CheckOutlined
  • CheckCircleOutlined
  • CheckSquareOutlined
  • ClockCircleOutlined
  • WarningOutlined
  • IssuesCloseOutlined
  • StopOutlined

Editor Icons

  • EditOutlined
  • FormOutlined
  • CopyOutlined
  • ScissorOutlined
  • DeleteOutlined
  • SnippetsOutlined
  • DiffOutlined
  • HighlightOutlined
  • AlignCenterOutlined
  • AlignLeftOutlined
  • AlignRightOutlined
  • BgColorsOutlined
  • BoldOutlined
  • ItalicOutlined
  • UnderlineOutlined
  • StrikethroughOutlined
  • RedoOutlined
  • UndoOutlined
  • ZoomInOutlined
  • ZoomOutOutlined
  • FontColorsOutlined
  • FontSizeOutlined
  • LineHeightOutlined
  • DashOutlined
  • SmallDashOutlined
  • SortAscendingOutlined
  • SortDescendingOutlined
  • DragOutlined
  • OrderedListOutlined
  • UnorderedListOutlined
  • RadiusSettingOutlined
  • ColumnWidthOutlined
  • ColumnHeightOutlined

Data Icons

  • AreaChartOutlined
  • PieChartOutlined
  • BarChartOutlined
  • DotChartOutlined
  • LineChartOutlined
  • RadarChartOutlined
  • HeatMapOutlined
  • FallOutlined
  • RiseOutlined
  • StockOutlined
  • BoxPlotOutlined
  • FundOutlined
  • SlidersOutlined

Brand and Logos

  • AndroidOutlined
  • AppleOutlined
  • WindowsOutlined
  • IeOutlined
  • ChromeOutlined
  • GithubOutlined
  • AliwangwangOutlined
  • DingdingOutlined
  • WeiboSquareOutlined
  • WeiboCircleOutlined
  • TaobaoCircleOutlined
  • Html5Outlined
  • WeiboOutlined
  • TwitterOutlined
  • WechatOutlined
  • YoutubeOutlined
  • AlipayCircleOutlined
  • TaobaoOutlined
  • SkypeOutlined
  • QqOutlined
  • MediumWorkmarkOutlined
  • GitlabOutlined
  • MediumOutlined
  • LinkedinOutlined
  • GooglePlusOutlined
  • DropboxOutlined
  • FacebookOutlined
  • CodepenOutlined
  • CodeSandboxOutlined
  • AmazonOutlined
  • GoogleOutlined
  • CodepenCircleOutlined
  • AlipayOutlined
  • AntDesignOutlined
  • AntCloudOutlined
  • AliyunOutlined
  • ZhihuOutlined
  • SlackOutlined
  • SlackSquareOutlined
  • BehanceOutlined
  • BehanceSquareOutlined
  • DribbbleOutlined
  • DribbbleSquareOutlined
  • InstagramOutlined
  • YuqueOutlined
  • AlibabaOutlined
  • YahooOutlined
  • RedditOutlined
  • SketchOutlined
  • WhatsAppOutlined
  • DingtalkOutlined

Application Icons

  • AccountBookOutlined
  • AimOutlined
  • AlertOutlined
  • ApartmentOutlined
  • ApiOutlined
  • AppstoreAddOutlined
  • AppstoreOutlined
  • AudioOutlined
  • AudioMutedOutlined
  • AuditOutlined
  • BankOutlined
  • BarcodeOutlined
  • BarsOutlined
  • BellOutlined
  • BlockOutlined
  • BookOutlined
  • BorderOutlined
  • BorderlessTableOutlined
  • BranchesOutlined
  • BugOutlined
  • BuildOutlined
  • BulbOutlined
  • CalculatorOutlined
  • CalendarOutlined
  • CameraOutlined
  • CarOutlined
  • CarryOutOutlined
  • CiCircleOutlined
  • CiOutlined
  • ClearOutlined
  • CloudDownloadOutlined
  • CloudOutlined
  • CloudServerOutlined
  • CloudSyncOutlined
  • CloudUploadOutlined
  • ClusterOutlined
  • CodeOutlined
  • CoffeeOutlined
  • CommentOutlined
  • CompassOutlined
  • CompressOutlined
  • ConsoleSqlOutlined
  • ContactsOutlined
  • ContainerOutlined
  • ControlOutlined
  • CopyrightOutlined
  • CreditCardOutlined
  • CrownOutlined
  • CustomerServiceOutlined
  • DashboardOutlined
  • DatabaseOutlined
  • DeleteColumnOutlined
  • DeleteRowOutlined
  • DeliveredProcedureOutlined
  • DeploymentUnitOutlined
  • DesktopOutlined
  • DisconnectOutlined
  • DislikeOutlined
  • DollarCircleOutlined
  • DollarOutlined
  • DownloadOutlined
  • EllipsisOutlined
  • EnvironmentOutlined
  • EuroCircleOutlined
  • EuroOutlined
  • ExceptionOutlined
  • ExpandAltOutlined
  • ExpandOutlined
  • ExperimentOutlined
  • ExportOutlined
  • EyeOutlined
  • EyeInvisibleOutlined
  • FieldBinaryOutlined
  • FieldNumberOutlined
  • FieldStringOutlined
  • FieldTimeOutlined
  • FileAddOutlined
  • FileDoneOutlined
  • FileExcelOutlined
  • FileExclamationOutlined
  • FileOutlined
  • FileGifOutlined
  • FileImageOutlined
  • FileJpgOutlined
  • FileMarkdownOutlined
  • FilePdfOutlined
  • FilePptOutlined
  • FileProtectOutlined
  • FileSearchOutlined
  • FileSyncOutlined
  • FileTextOutlined
  • FileUnknownOutlined
  • FileWordOutlined
  • FileZipOutlined
  • FilterOutlined
  • FireOutlined
  • FlagOutlined
  • FolderAddOutlined
  • FolderOutlined
  • FolderOpenOutlined
  • FolderViewOutlined
  • ForkOutlined
  • FormatPainterOutlined
  • FrownOutlined
  • FunctionOutlined
  • FundProjectionScreenOutlined
  • FundViewOutlined
  • FunnelPlotOutlined
  • GatewayOutlined
  • GifOutlined
  • GiftOutlined
  • GlobalOutlined
  • GoldOutlined
  • GroupOutlined
  • HddOutlined
  • HeartOutlined
  • HistoryOutlined
  • HolderOutlined
  • HomeOutlined
  • HourglassOutlined
  • IdcardOutlined
  • ImportOutlined
  • InboxOutlined
  • InsertRowAboveOutlined
  • InsertRowBelowOutlined
  • InsertRowLeftOutlined
  • InsertRowRightOutlined
  • InsuranceOutlined
  • InteractionOutlined
  • KeyOutlined
  • LaptopOutlined
  • LayoutOutlined
  • LikeOutlined
  • LineOutlined
  • LinkOutlined
  • Loading3QuartersOutlined
  • LoadingOutlined
  • LockOutlined
  • MacCommandOutlined
  • MailOutlined
  • ManOutlined
  • MedicineBoxOutlined
  • MehOutlined
  • MenuOutlined
  • MergeCellsOutlined
  • MessageOutlined
  • MobileOutlined
  • MoneyCollectOutlined
  • MonitorOutlined
  • MoreOutlined
  • NodeCollapseOutlined
  • NodeExpandOutlined
  • NodeIndexOutlined
  • NotificationOutlined
  • NumberOutlined
  • OneToOneOutlined
  • PaperClipOutlined
  • PartitionOutlined
  • PayCircleOutlined
  • PercentageOutlined
  • PhoneOutlined
  • PictureOutlined
  • PlaySquareOutlined
  • PoundCircleOutlined
  • PoundOutlined
  • PoweroffOutlined
  • PrinterOutlined
  • ProfileOutlined
  • ProjectOutlined
  • PropertySafetyOutlined
  • PullRequestOutlined
  • PushpinOutlined
  • QrcodeOutlined
  • ReadOutlined
  • ReconciliationOutlined
  • RedEnvelopeOutlined
  • ReloadOutlined
  • RestOutlined
  • RobotOutlined
  • RocketOutlined
  • RotateLeftOutlined
  • RotateRightOutlined
  • SafetyCertificateOutlined
  • SafetyOutlined
  • SaveOutlined
  • ScanOutlined
  • ScheduleOutlined
  • SearchOutlined
  • SecurityScanOutlined
  • SelectOutlined
  • SendOutlined
  • SettingOutlined
  • ShakeOutlined
  • ShareAltOutlined
  • ShopOutlined
  • ShoppingCartOutlined
  • ShoppingOutlined
  • SisternodeOutlined
  • SkinOutlined
  • SmileOutlined
  • SolutionOutlined
  • SoundOutlined
  • SplitCellsOutlined
  • StarOutlined
  • SubnodeOutlined
  • SwitcherOutlined
  • SyncOutlined
  • TableOutlined
  • TabletOutlined
  • TagOutlined
  • TagsOutlined
  • TeamOutlined
  • ThunderboltOutlined
  • ToTopOutlined
  • ToolOutlined
  • TrademarkCircleOutlined
  • TrademarkOutlined
  • TransactionOutlined
  • TranslationOutlined
  • TrophyOutlined
  • UngroupOutlined
  • UnlockOutlined
  • UploadOutlined
  • UsbOutlined
  • UserAddOutlined
  • UserDeleteOutlined
  • UserOutlined
  • UserSwitchOutlined
  • UsergroupAddOutlined
  • UsergroupDeleteOutlined
  • VerifiedOutlined
  • VideoCameraAddOutlined
  • VideoCameraOutlined
  • WalletOutlined
  • WifiOutlined
  • WomanOutlined

Examples

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.

expand codeexpand code
import {
  HomeOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space>
    <HomeOutlined />
    <SettingFilled />
    <SmileOutlined />
    <SyncOutlined spin />
    <SmileOutlined rotate={180} />
    <LoadingOutlined />
  </Space>
);

export default App;

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

expand codeexpand code
import Icon, { HomeOutlined } from '@ant-design/icons';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import { Space } from 'antd';
import React from 'react';

const HeartSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

const PandaSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <path
      d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"
      fill="#6B676E"
    />
    <path
      d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"
      fill="#FFEBD2"
    />
    <path
      d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"
      fill="#E9D7C3"
    />
    <path
      d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"
      fill="#FFFFFF"
    />
    <path
      d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"
      fill="#6B676E"
    />
    <path
      d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"
      fill="#464655"
    />
    <path
      d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
      fill="#464655"
    />
    <path
      d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
      fill="#464655"
    />
  </svg>
);

const HeartIcon = (props: Partial<CustomIconComponentProps>) => (
  <Icon component={HeartSvg} {...props} />
);

const PandaIcon = (props: Partial<CustomIconComponentProps>) => (
  <Icon component={PandaSvg} {...props} />
);

const App: React.FC = () => (
  <Space>
    <HeartIcon style={{ color: 'hotpink' }} />
    <PandaIcon style={{ fontSize: '32px' }} />
    <Icon component={HomeOutlined as React.ForwardRefExoticComponent<any>} />
    <HomeOutlined />
  </Space>
);

export default App;

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 overrided in array order.

expand codeexpand code
import { createFromIconfontCN } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
  ],
});

const App: React.FC = () => (
  <Space>
    <IconFont type="icon-javascript" />
    <IconFont type="icon-java" />
    <IconFont type="icon-shoppingcart" />
    <IconFont type="icon-python" />
  </Space>
);

export default App;

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

expand codeexpand code
import { CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space>
    <SmileTwoTone />
    <HeartTwoTone twoToneColor="#eb2f96" />
    <CheckCircleTwoTone twoToneColor="#52c41a" />
  </Space>
);

export default App;

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

expand codeexpand code
import { createFromIconfontCN } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

const App: React.FC = () => (
  <Space>
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </Space>
);

export default App;

API#

Common Icon#

PropertyDescriptionTypeDefaultVersion
classNameThe className of Iconstring-
rotateRotate by n degrees (not working in IE9)number-
spinRotate icon with animationbooleanfalse
styleThe style properties of icon, like fontSize and colorCSSProperties-
twoToneColorOnly supports the two-tone icon. Specify the primary colorstring (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#

PropertyDescriptionTypeDefaultVersion
componentThe component used for the root nodeComponentType<CustomIconComponentProps>-
rotateRotate degrees (not working in IE9)number-
spinRotate icon with animationbooleanfalse
styleThe style properties of icon, like fontSize and colorCSSProperties-

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 { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

It creates a component that uses SVG sprites in essence.

The following options are available:

PropertyDescriptionTypeDefaultVersion
extraCommonPropsDefine extra properties to the component{ [key: string]: any }{}
scriptUrlThe URL generated by iconfont.cn project. Support string[] after @ant-design/icons@4.1.0string | 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
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}
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.render(<Icon component={MessageSvg} />, mountNode);

The following properties are available for the component:

PropertyDescriptionTypeReadonlyVersion
classNameThe computed class name of the svg elementstring-
fillDefine the color used to paint the svg elementstringcurrentColor
heightThe height of the svg elementstring | number1em
styleThe computed style of the svg elementCSSProperties-
widthThe width of the svg elementstring | number1em
ButtonTypography