Icon
Semantic vector graphics.
List of icons#
Click the icon and copy the code.
We are still adding two-tone icons right now.
Select the Icon Theme
Directional Icons
- step-backward
- step-forward
- fast-backward
- fast-forward
- shrink
- arrows-alt
- down
- up
- left
- right
- caret-up
- caret-down
- caret-left
- caret-right
- up-circle
- down-circle
- left-circle
- right-circle
- double-right
- double-left
- vertical-left
- vertical-right
- forward
- backward
- rollback
- enter
- retweet
- swap
- swap-left
- swap-right
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- play-circle
- up-square
- down-square
- left-square
- right-square
- login
- logout
- menu-fold
- menu-unfold
- border-bottom
- border-horizontal
- border-inner
- border-left
- border-right
- border-top
- border-verticle
- pic-center
- pic-left
- pic-right
- radius-bottomleft
- radius-bottomright
- radius-upleft
- fullscreen
- fullscreen-exit
Suggested Icons
- question
- question-circle
- plus
- plus-circle
- pause
- pause-circle
- minus
- minus-circle
- plus-square
- minus-square
- info
- info-circle
- exclamation
- exclamation-circle
- close
- close-circle
- close-square
- check
- check-circle
- check-square
- clock-circle
- warning
- issues-close
- stop
Editor Icons
- edit
- form
- copy
- scissor
- delete
- snippets
- diff
- highlight
- align-center
- align-left
- align-right
- bg-colors
- bold
- italic
- underline
- strikethrough
- redo
- undo
- zoom-in
- zoom-out
- font-colors
- font-size
- line-height
- colum-height
- dash
- small-dash
- sort-ascending
- sort-descending
- drag
- ordered-list
- radius-setting
Data Icons
- area-chart
- pie-chart
- bar-chart
- dot-chart
- line-chart
- radar-chart
- heat-map
- fall
- rise
- stock
- box-plot
- fund
- sliders
Application Icons
- lock
- unlock
- bars
- book
- calendar
- cloud
- cloud-download
- code
- copy
- credit-card
- delete
- desktop
- download
- ellipsis
- file
- file-text
- file-unknown
- file-pdf
- file-word
- file-excel
- file-jpg
- file-ppt
- file-markdown
- file-add
- folder
- folder-open
- folder-add
- hdd
- frown
- meh
- smile
- inbox
- laptop
- appstore
- link
- mobile
- notification
- paper-clip
- picture
- poweroff
- reload
- search
- setting
- share-alt
- shopping-cart
- tablet
- tag
- tags
- to-top
- upload
- user
- video-camera
- home
- loading
- loading-3-quarters
- cloud-upload
- star
- heart
- environment
- eye
- eye-invisible
- camera
- save
- team
- solution
- phone
- filter
- exception
- export
- customer-service
- qrcode
- scan
- like
- dislike
- message
- pay-circle
- calculator
- pushpin
- bulb
- select
- switcher
- rocket
- bell
- disconnect
- database
- compass
- barcode
- hourglass
- key
- flag
- layout
- printer
- sound
- usb
- skin
- tool
- sync
- wifi
- car
- schedule
- user-add
- user-delete
- usergroup-add
- usergroup-delete
- man
- woman
- shop
- gift
- idcard
- medicine-box
- red-envelope
- coffee
- copyright
- trademark
- safety
- wallet
- bank
- trophy
- contacts
- global
- shake
- api
- fork
- dashboard
- table
- profile
- alert
- audit
- branches
- build
- border
- crown
- experiment
- fire
- money-collect
- property-safety
- read
- reconciliation
- rest
- security-scan
- insurance
- interation
- safety-certificate
- project
- thunderbolt
- block
- cluster
- deployment-unit
- dollar
- euro
- pound
- file-done
- file-exclamation
- file-protect
- file-search
- file-sync
- gateway
- gold
- robot
- shopping
Brand and Logos
- android
- apple
- windows
- ie
- chrome
- github
- aliwangwang
- dingding
- weibo-square
- weibo-circle
- taobao-circle
- html5
- youtube
- alipay-circle
- taobao
- skype
- medium-workmark
- gitlab
- medium
- google-plus
- dropbox
- codepen
- code-sandbox
- amazon
- codepen-circle
- alipay
- ant-design
- aliyun
- zhihu
- slack
- slack-square
- behance
- behance-square
- dribbble
- dribbble-square
- yuque
- alibaba
- yahoo
- ward-door
- shift-records
- earlysense
- nursing-plan
- surgery-monitor
- bed-list
- vital-sign
- infusion
- electron-chart-pie
- electron-chouti
- electron-delete
- electron-drug
- electron-freezer
- electron-info-circle
- electron-left
- electron-loading
- electron-minus
- electron-neutral
- electron-password
- electron-plus
- electron-question-circle
- electron-right
- electron-search
- electron-spinner
- electron-temperature
- electron-up
- electron-user
- electron-yaohe
Examples
Use tag <Icon /> to create an icon and set its type in the type prop. Specific the spin property to show spinning animation and the theme property to switch different themes.
import { Icon } from 'antd';
ReactDOM.render(
<div className="icons-list">
<Icon type="home" />
<Icon type="setting" theme="filled" />
<Icon type="smile" theme="outlined" />
<Icon type="sync" spin />
<Icon type="smile" rotate={180} />
<Icon type="loading" />
</div>,
mountNode
);Create a reusable React component by using <Icon component={...} />. The property component takes a React component that renders to svg element.
import { Icon } from 'antd';
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" p-id="1143" />
<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" p-id="1144" />
<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" p-id="1145" />
<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" p-id="1146" />
<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" p-id="1147" />
<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" p-id="1148" />
<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" p-id="1149" />
<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" p-id="1150" />
</svg>
);
const HeartIcon = props => (
<Icon component={HeartSvg} {...props} />
);
const PandaIcon = props => (
<Icon component={PandaSvg} {...props} />
);
ReactDOM.render(
<div className="custom-icons-list">
<HeartIcon style={{ color: 'hotpink' }} />
<PandaIcon style={{ fontSize: '32px' }} />
</div>,
mountNode
);.custom-icons-list > .anticon {
margin-right: 6px;
}Specific them property theme to twoTone to render two-tone icons. You can also set the primary color.
import { Icon } from 'antd';
ReactDOM.render(
<div className="icons-list">
<Icon type="smile" theme="twoTone" />
<Icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
</div>,
mountNode
);If you are using iconfont.cn, you can use the icons in your project gracefully.
import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
ReactDOM.render(
<div className="icons-list">
<IconFont type="icon-tuichu" />
<IconFont type="icon-facebook" />
<IconFont type="icon-twitter" />
</div>,
mountNode
);API#
| Property | Description | Type | Default |
|---|---|---|---|
| type | Type of the ant design icon | string | - |
| style | Style properties of icon, like fontSize and color | CSSProperties | - |
| theme | Theme of the ant design icon | 'filled' | 'outlined' | 'twoTone' | 'outlined' |
| spin | Rotate icon with animation | boolean | false |
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - |
| component | The component used for the root node. This will override the type property. | ComponentType<CustomIconComponentProps> | - |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
SVG icons#
We introduced SVG icons in 3.9.0 version replacing font icons which brings benefits below:
Complete offline usage of icon, no dependency of CDN font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
Much more display accuracy in lower-level screens.
Support multiple colors for icon.
No need to change built-in icons with overriding styles by providing more props in component.
More discussion of SVG icon reference to #10353.
⚠️ About the extra bundle size brought by all SVG icons we imported in 3.9.0, we will provide new API to allow developers importing icons as your need, you can trace #12011 for further progress.
The properties theme, component and twoToneColor are added in 3.9.0. The best practice is to pass the property theme to every <Icon /> components.
<Icon type="star" theme="filled" />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 Icon.getTwoToneColor() and Icon.setTwoToneColor(colorString) to spicify the primary color.
Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96Custom Font Icon#
We added a createFromIconfontCN function to help developer using their own icons deployed at iconfont.cn in a convenient way.
This method is specified for iconfont.cn.
const MyIcon = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);It create a component that uses SVG sprites in essence.
The following options are available:
| Property | Description | Type | Default |
|---|---|---|---|
| scriptUrl | The URL generated by iconfont.cn project. | string | - |
| extraCommonProps | Define extra properties to the component | { [key: string]: any } | {} |
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 an 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 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
ReactDOM.render(
<Icon component={MessageSvg} />,
mountNode
);The following properties are available for the component:
| Property | Description | Type | Default |
|---|---|---|---|
| width | The width of the svg element | string | number | '1em' |
| height | The height of the svg element | string | number | '1em' |
| fill | Define the color used to paint the svg element | string | 'currentColor' |
| className | The computed class name of the svg element | string | - |
| style | The computed style of the svg element | CSSProperties | - |