Icon图标

语义化的矢量图形。

图标的命名规范#

我们为每个图标赋予了语义化的命名，命名规则如下:

• 实心和描线图标保持同名，用 -o 来区分，比如 question-circle（实心） 和 question-circle-o（描线）；

• 命名顺序：[图标名]-[形状?]-[描线?]-[方向?]。

? 为可选。

完整的图标设计规范请访问 图标规范。

如何使用#

使用 <Icon /> 标签声明组件，指定图标对应的 type 属性，示例代码如下:

<Icon type="link" />

本地部署#

图标默认托管在 iconfont.cn，默认公网可访问。如需本地部署，可参考 示例。

图标列表#

点击图标复制代码。

方向性图标#

• 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

提示建议性图标#

• 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

网站通用图标#

• 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

品牌和标识#

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