Icon
Semantic vector graphics.
Icons naming convention#
We provide semantic name for every icon, and naming rules are as follows:
Scanning line icon has the similar name with its solid one,but it's distinguished by
-o
, for example,question-circle
(a full circle) andquestion-circle-o
(an empty circle);Naming sequence:
[name]-[shape?]-[outline?]-[direction?]
.
?
means is optional.
See more design detail at here.
How To Use#
Use tag
<Icon type="link" />
Local deployment#
By default, icons are deployed at iconfont.cn, publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to this example。
List of icons#
Click the icon and copy the code。
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
- up-circle-o
- down-circle-o
- right-circle-o
- left-circle-o
- double-right
- double-left
- verticle-left
- verticle-right
- forward
- backward
- rollback
- enter
- retweet
- swap
- swap-left
- swap-right
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- play-circle
- play-circle-o
- up-square
- down-square
- left-square
- right-square
- up-square-o
- down-square-o
- left-square-o
- right-square-o
- login
- logout
- menu-fold
- menu-unfold
Suggested Icons#
- question
- question-circle-o
- question-circle
- plus
- plus-circle-o
- plus-circle
- pause
- pause-circle-o
- pause-circle
- minus
- minus-circle-o
- minus-circle
- plus-square
- plus-square-o
- minus-square
- minus-square-o
- info
- info-circle-o
- info-circle
- exclamation
- exclamation-circle-o
- exclamation-circle
- close
- close-circle
- close-circle-o
- close-square
- close-square-o
- check
- check-circle
- check-circle-o
- check-square
- check-square-o
- clock-circle-o
- clock-circle
- warning
Application Icons#
- lock
- unlock
- area-chart
- pie-chart
- bar-chart
- dot-chart
- bars
- book
- calendar
- cloud
- cloud-download
- code
- code-o
- copy
- credit-card
- delete
- desktop
- download
- edit
- 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
- frown-o
- meh
- meh-o
- smile
- smile-o
- inbox
- laptop
- appstore-o
- appstore
- line-chart
- link
- mobile
- notification
- paper-clip
- picture
- poweroff
- reload
- search
- setting
- share-alt
- shopping-cart
- tablet
- tag
- tag-o
- tags
- tags-o
- to-top
- upload
- user
- video-camera
- home
- loading
- loading-3-quarters
- cloud-upload-o
- cloud-download-o
- cloud-upload
- cloud-o
- star-o
- star
- heart-o
- heart
- environment
- environment-o
- eye
- eye-o
- camera
- camera-o
- save
- team
- solution
- phone
- filter
- exception
- export
- customer-service
- qrcode
- scan
- like
- like-o
- dislike
- dislike-o
- message
- pay-circle
- pay-circle-o
- calculator
- pushpin
- pushpin-o
- 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
- form
- table
- profile
Brand and Logos#
- android
- android-o
- apple
- apple-o
- windows
- windows-o
- ie
- chrome
- github
- aliwangwang
- aliwangwang-o
- dingding
- dingding-o
- weibo-square
- weibo-circle
- taobao-circle
- html5
- youtube
- alipay-circle
- taobao
- skype
- medium-workmark
- gitlab
- medium
- google-plus
- dropbox
- codepen
- amazon
- codepen-circle
- alipay
- ant-design
- aliyun
- zhihu
- slack
- slack-square
- behance
- behance-square
- dribbble
- dribbble-square
- yuque
API#
You can set style
and className
for size and color of icons because they are still fonts in essence.
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
Property | Description | Type | Default |
---|---|---|---|
spin | Rotate icon with animation | boolean | false |
style | style properties of icon, like fontSize and color | object | - |
type | Type of ant design icon | string | - |