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

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' }} />
PropertyDescriptionTypeDefault
spinRotate icon with animationbooleanfalse
stylestyle properties of icon, like fontSize and colorobject-
typeType of ant design iconstring-