Icon 图标

注意事项

  • 若为装饰性icon,请设置通过设置 aria-hidden 忽略;若为按钮类型icon,请务必设置 role="button"aria-label

基本

展示图标基本使用方法。

  • Add
  • AddL
  • AddM
  • AddS
  • AddSolid-fill
  • Added
  • Aone
  • Approve01
  • Attachment
  • Back
  • BottomGap
  • BottomLeft
  • BottomMini
  • BottomNormal
  • BottomPure
  • BottomRight
  • BottomS
  • Bubble
  • BubbleSolid-fill
  • C-Space01
  • Calendar01
  • Checkall
  • Checkbox-check
  • Checklist
  • ChecklistSolid-fill
  • ClockExtra
  • CloseL
  • CloseM
  • CloseS
  • CloseXS
  • Customized
  • Date
  • Delete
  • DeleteSolid-fill
  • Details
  • Division
  • Done
  • Donelist
  • Duplicate
  • Edit
  • Extra
  • Extra01
  • ExtraCircle
  • ExtraVertical
  • Feedback2
  • Filter01
  • Flag
  • Homepage
  • Import01
  • Inbox-line
  • Intelligent
  • KR
  • Launch
  • LeftGap
  • LeftNormal
  • LeftPure
  • LeftS
  • ListMove
  • Menu01
  • Mine
  • MoreApps
  • Next
  • NormalSolid-fill
  • Notice
  • Notification
  • Other
  • Pan
  • Participant
  • Pause
  • Picture01
  • Play
  • Player-line
  • Previous
  • Priority
  • Project
  • Project01
  • ProjectExtra
  • Qzone
  • Recent
  • Record
  • Reset
  • Reset-line-01
  • Rewind
  • RightCircle
  • RightCircleSolid-fill
  • RightGap
  • RightNormal
  • RightPure
  • RightPure-1
  • School
  • Search_line
  • SelectAll
  • SelectOne
  • Share01
  • ShareExtra
  • SignIn
  • Sort01
  • Speed
  • Spot
  • Star
  • StarSolid-fill
  • Stop
  • Subtask
  • SwitchList
  • Sync
  • Todo
  • Tomato
  • Top
  • TopGap
  • TopLeft
  • TopLeftToBottomRight
  • TopMini
  • TopPure
  • TopRight
  • TopRightToBottomLeft
  • TopS
  • Video01
  • Voice-fill
  • add-folder
  • add-line
  • add-test
  • add-user-line
  • add-user-set
  • alert-clock
  • align-center
  • align-left
  • align-right
  • alignat
  • aliyun
  • approve
  • apps
  • archive
  • area
  • arrow-clock-left
  • arrow-clock-right
  • arrow-down
  • arrow-down-o
  • arrow-down-o-fill
  • arrow-hollow-down
  • arrow-hollow-up
  • arrow-in
  • arrow-left
  • arrow-left-o
  • arrow-left-o-fill
  • arrow-out
  • arrow-right
  • arrow-right-o
  • arrow-right-o-fill
  • arrow-roundleft
  • arrow-roundright
  • arrow-up
  • arrow-up-o
  • arrow-up-o-fill
  • arrow-upline-o-fill
  • arrow-upright-o-fill
  • arrows-cycle
  • arrows-full-collapse
  • arrows-full-expand
  • arrows-long-down
  • arrows-long-up
  • arrows-pinch
  • arrows-pinch-out
  • arrows-swtich-horizontal
  • arrows-swtich-vertical
  • attachment-line
  • bell-fill
  • beover
  • blockquote
  • bold
  • book
  • bookkeeping-logo
  • box-plus
  • branch
  • briefcase-stroke
  • brokenline
  • building
  • building-fill
  • bulb
  • calendar
  • calendar-line
  • calendar-tick
  • chart-cumulative-flow
  • chart-histogram
  • chart-line
  • chart-pie
  • chart-scatter
  • chat-3-line
  • chat-group-stroke
  • chat-private
  • chat-private-stroke
  • checkbox
  • checkbox-checked
  • checkbox-checked-fill
  • checkbox-line
  • chevron-down
  • chevron-down-o
  • chevron-down-o-fill
  • chevron-down-s
  • chevron-left
  • chevron-left-o
  • chevron-left-o-fill
  • chevron-left-s
  • chevron-right
  • chevron-right-o
  • chevron-right-o-fill
  • chevron-right-s
  • chevron-up
  • chevron-up-o
  • chevron-up-o-fill
  • chevron-up-s
  • chevrons-collapse-vertical
  • chevrons-expand-horizontal
  • chevrons-expand-vertical
  • chevrons-left
  • chevrons-right
  • circle
  • circle-question
  • clear
  • client
  • clock
  • clock-fill
  • clothes
  • cloud
  • code
  • col-after
  • col-before
  • collapse
  • collection
  • column
  • comments
  • compass-fill
  • compass-o
  • computer
  • contact
  • copy
  • created
  • created-fill
  • crop
  • cross-line
  • custom-field
  • custom-number
  • custom-text
  • cut
  • cuvette
  • degree
  • demo
  • ding
  • dingding
  • dingding-o-fill
  • disable
  • discussion-fill
  • distribute
  • dock
  • done-line
  • douban
  • double-box-plus
  • double-tick
  • download
  • download-file
  • download-stage
  • drag
  • dribbble
  • dropbox
  • earth
  • email
  • emoji-frown
  • emoji-smile
  • enterprise-calendar
  • evernote
  • expand
  • expand-oblique
  • export
  • eye
  • eye-slash
  • facebook
  • fangcloud
  • favorite
  • favorite-fill
  • figma
  • file
  • filter
  • focus
  • folder
  • framer
  • gear
  • github
  • gitlab
  • goal
  • google
  • grade
  • grid
  • h1
  • h2
  • h3
  • heading
  • headset
  • histogram
  • home
  • home-fill
  • horizontal
  • human
  • import
  • import-project
  • inbox
  • inbox1
  • info
  • info-o
  • info-o-fill
  • intelligence
  • intelligent-assistant
  • intro
  • invistion
  • invite-fill
  • ip
  • ip-box-fill
  • italic
  • jinshuju
  • knowledge-base
  • lightning
  • like
  • like-fill
  • line-through
  • link
  • linkedin
  • links-line
  • list-line
  • loading
  • lock
  • log-out
  • manage-subscribe
  • map-pin-2-line
  • map-pin-2-line1
  • markdown
  • menu
  • meta
  • milestone
  • mindmap
  • minus-o
  • mobile
  • moments
  • moon
  • more
  • more-line
  • more-o
  • more-o-fill
  • multi-number
  • multi-selection
  • multiplechoice
  • myteam
  • netease
  • newtab
  • normal
  • normal-text
  • notice-3-line
  • notification-line
  • office-excel
  • office-powerpoint
  • office-word
  • oldman
  • org-apps
  • org-book
  • org-crown
  • org-medal
  • org-projects
  • organization
  • overview
  • palette
  • panel
  • paper
  • paper-pen
  • paperclip
  • paragraph
  • pause-o
  • pencil
  • pencil-fill
  • permission
  • picture
  • pin
  • pin-fill
  • pinterest
  • play-o
  • play-outline
  • plus
  • plus-box-fill
  • plus-mobile
  • plus-o
  • plus-o-fill
  • post
  • preview
  • print
  • priority-line
  • priorityflag
  • processon
  • progress
  • project-line
  • push-line
  • qq
  • qrcode
  • question-o
  • question-o-fill
  • question-talk
  • quetion-o
  • quote
  • redo
  • region
  • region-fill
  • remove
  • remove-o
  • remove-o-fill
  • reorder
  • report-overview
  • rich-text
  • risk
  • robot
  • row-after
  • row-before
  • rss
  • safety
  • salesman
  • save
  • scan
  • screenshot
  • search
  • selection
  • share-box-line
  • share-stage
  • share-stroke
  • share1
  • sharp
  • shortcut
  • single-chat-bubble
  • single-selection
  • size-grid
  • smartsorting
  • sort
  • sprint
  • stack-tick
  • stack-tick-fill
  • stage
  • star-fill
  • starstroke
  • subscribe
  • subscribe-done
  • subtask-line
  • sun
  • switch
  • table
  • tachometer
  • tag
  • tag-fill
  • target
  • task-board
  • task-dependency
  • task-dependency-post
  • task-dependency-pre
  • task-tick
  • taskType
  • team-briefcase
  • team-building
  • team-bulb
  • team-bus
  • team-calculator
  • team-camera
  • team-compass
  • team-flag
  • team-graph
  • team-location
  • team-loudspeaker
  • team-medal
  • team-notebook
  • team-pen
  • team-stamp
  • team-talk
  • team-terminal
  • team-tie
  • teambition
  • teambition-outline
  • testcaselibrary
  • tex
  • text-card
  • thumb-up-line
  • tick
  • tick-bold
  • tick-o
  • tick-o-fill
  • timeline
  • timeline-s
  • to-do
  • tongzhi
  • top-up-fill
  • trashbin
  • travel
  • tree
  • tree01
  • treenode-single
  • triangle-down
  • triangle-down-s
  • triangle-left
  • triangle-left-s
  • triangle-right
  • triangle-right-o
  • triangle-right-s
  • triangle-up
  • triangle-up-s
  • twitter
  • underline
  • undo
  • unfold
  • unlink
  • unlock
  • unordered-list
  • updaterate
  • upload
  • upload-pic
  • user
  • user-add
  • user-disable
  • user-externa
  • user-fill
  • user-line
  • user-line1
  • user-o
  • user-question
  • user-search
  • user-switch
  • users
  • users-fill
  • users-s
  • verified
  • video
  • wall
  • warning-o
  • warning-o-fill
  • wechat
  • wechat-enterprise
  • weibo
  • workhour
  • wps
  • xiaomi
  • yunzhijia
  • zendesk
  • zhihu
  • zoom-in
  • zoom-out

图标列表

点击图标复制代码。

  • small
  • medium
  • large
  • xl
  • xxl
  • xxxl

尺寸

ICON的尺寸包括:smallmediumlargexlxxlxxxl

This is a success message!
This is a warning message!
This is a failure message!

自定义样式

图标字体本质上还是文字,可以使用 style 和 className 设置图标的大小和颜色。

button:

decoration:

无障碍

若为装饰性icon,请设置通过设置 aria-hidden 忽略;若为按钮类型icon,请务必设置 role="button"aria-label

使用 iconfont.cn

对于使用 iconfont.cn 的用户,通过设置 createFromIconfont 方法参数对象中的 scriptUrl 和 symbolPrefix 字段, 即可轻松地使用已有项目中的图标。

API

Icon

参数说明类型默认值
size指定图标大小

可选值:
'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'
Enum'medium'
type指定显示哪种图标String-

自定义font图标

提供了createFromIconfont方法,便于开发者调用在 iconfont.cn 上自行管理的图标。

const MyIcon = Icon.createFromIconfont({
  scriptUrl: '//at.alicdn.com/t/font_1310450_c7pqbwsebhj.js',
  symbolPrefix: 'at-', // Iconfont 项目的图标前缀
});

ReactDOM.render(
  <div className="icons-list">
    <MyIcon type="office-word" />
    <MyIcon type="office-excel" />
    <MyIcon type="office-powerpoint" />
  </div>,
  mountNode,
);

原理详见symbol使用

createFromIconfont方法的入参对象成员如下:

参数说明类型默认值
scriptUrl必填,iconfont.cn 项目在线生成的 js 地址String-
symbolPrefix必填,iconfont.cn 项目前缀,可从项目信息中查看String-