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) and question-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 to create an icon and set its type in the type prop, for example:

<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

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-excel
• file-jpg
• file-ppt
• 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
• mail
• 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

Brand and Logos#

• android
• android-o
• apple
• apple-o
• windows
• windows-o
• ie
• chrome
• github
• aliwangwang
• aliwangwang-o
• dingding
• dingding-o