logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Icon

Semantic vector graphics.

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

How to use

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

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
npm install @ant-design/icons@5.x --save
Tips

Remember to use @ant-design/icons v5 with antd v5. See: #53275

List of icons

Examples

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.

jsx
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.

jsx
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.

jsx
<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.

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 in a convenient way.

This method is specified for iconfont.cn.

jsx
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:

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.

js
// 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,
},
},
],
};

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

js
// vite.config.js
export default defineConfig(() => ({
// ... other config
plugins: [svgr({ svgrOptions: { icon: true } })],
}));
jsx
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:

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

Design Token

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
  • WhatsAppOutlined
  • YoutubeOutlined
  • AlipayCircleOutlined
  • TaobaoOutlined
  • DingtalkOutlined
  • 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
  • WechatWorkOutlined
  • OpenAIOutlined
  • DiscordOutlined
  • XOutlined
  • BilibiliOutlined
  • PinterestOutlined
  • TikTokOutlined
  • SpotifyOutlined
  • TwitchOutlined
  • LinuxOutlined
  • JavaOutlined
  • JavaScriptOutlined
  • PythonOutlined
  • RubyOutlined
  • DotNetOutlined
  • KubernetesOutlined
  • DockerOutlined
  • BaiduOutlined
  • HarmonyOSOutlined

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
  • 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
  • MergeOutlined
  • MessageOutlined
  • MobileOutlined
  • MoneyCollectOutlined
  • MonitorOutlined
  • MoonOutlined
  • MoreOutlined
  • MutedOutlined
  • NodeCollapseOutlined
  • NodeExpandOutlined
  • NodeIndexOutlined
  • NotificationOutlined
  • NumberOutlined
  • OneToOneOutlined
  • PaperClipOutlined
  • PartitionOutlined
  • PayCircleOutlined
  • PercentageOutlined
  • PhoneOutlined
  • PictureOutlined
  • PlaySquareOutlined
  • PoundCircleOutlined
  • PoundOutlined
  • PoweroffOutlined
  • PrinterOutlined
  • ProductOutlined
  • 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
  • SignatureOutlined
  • SisternodeOutlined
  • SkinOutlined
  • SmileOutlined
  • SolutionOutlined
  • SoundOutlined
  • SplitCellsOutlined
  • StarOutlined
  • SubnodeOutlined
  • SunOutlined
  • SwitcherOutlined
  • SyncOutlined
  • TableOutlined
  • TabletOutlined
  • TagOutlined
  • TagsOutlined
  • TeamOutlined
  • ThunderboltOutlined
  • ToTopOutlined
  • ToolOutlined
  • TrademarkCircleOutlined
  • TrademarkOutlined
  • TransactionOutlined
  • TranslationOutlined
  • TrophyOutlined
  • TruckOutlined
  • UngroupOutlined
  • UnlockOutlined
  • UploadOutlined
  • UsbOutlined
  • UserAddOutlined
  • UserDeleteOutlined
  • UserOutlined
  • UserSwitchOutlined
  • UsergroupAddOutlined
  • UsergroupDeleteOutlined
  • VerifiedOutlined
  • VideoCameraAddOutlined
  • VideoCameraOutlined
  • WalletOutlined
  • WifiOutlined
  • WomanOutlined
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 the spinning animation.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Icon

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Multiple resources from iconfont.cn

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Two-tone icon and colorful icon

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Use iconfont.cn

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
heart icon
Panda icon