---
localeCode: zh-CN
order: 26
category: 基础
title:  Icon 图标
icon: doc-icons
brief: 语义化的矢量图形。
---

## 图标列表

默认的图标集 `@douyinfe/semi-icons` 包含面性、线性、AI 三套图标。面性图标、线性图标，以及 AI 图标中的单色图标默认不带颜色，可通过 css color 属性更改颜色。
AI 图标中的双色，多色图标有默认颜色，可以通过 fill 更改颜色。

AI 图标自 v2.86.0 提供。

`@douyinfe/semi-icons-lab` 为彩色图标集，需单独安装，不可改色, lab 图标集于 v2.48 后提供

<div style={{display: "none"}}>
@douyinfe/semi-icons icon list:

IconAbsoluteStroked
IconActivity
IconAlarm
IconAlarmStroked
IconAlertCircle
IconAlertTriangle
IconAlignBottom
IconAlignCenter
IconAlignCenterVertical
IconAlignHCenterStroked
IconAlignHLeftStroked
IconAlignHRightStroked
IconAlignJustify
IconAlignLeft
IconAlignRight
IconAlignTop
IconAlignVBotStroked
IconAlignVBottomStroked
IconAlignVCenterStroked
IconAlignVTopStroked
IconApartment
IconAppCenter
IconApps
IconArchive
IconArrowDown
IconArrowDownLeft
IconArrowDownRight
IconArrowLeft
IconArrowRight
IconArrowUp
IconArrowUpLeft
IconArrowUpRight
IconArticle
IconAscend
IconAt
IconBackTop
IconBackward
IconBarChartHStroked
IconBarChartVStroked
IconBeaker
IconBell
IconBellStroked
IconBold
IconBolt
IconBook
IconBookH5Stroked
IconBookOpenStroked
IconBookStroked
IconBookmark
IconBookmarkAddStroked
IconBookmarkDeleteStroked
IconBottomCenterStroked
IconBottomLeftStroked
IconBottomRightStroked
IconBox
IconBrackets
IconBranch
IconBriefStroked
IconBriefcase
IconBriefcaseStroked
IconBulb
IconButtonStroked
IconBytedanceLogo
IconCalendar
IconCalendarClock
IconCalendarClockStroked
IconCalendarStroked
IconCamera
IconCameraStroked
IconCandlestickChartStroked
IconCaretdown
IconCaretup
IconCarouselStroked
IconCart
IconCartStroked
IconCaseSensitive
IconCenterLeftStroked
IconCenterRightStroked
IconChainStroked
IconCheckChoiceStroked
IconCheckCircleStroked
IconCheckList
IconCheckboxIndeterminate
IconCheckboxTick
IconChecklistStroked
IconChevronDown
IconChevronDownStroked
IconChevronLeft
IconChevronRight
IconChevronRightStroked
IconChevronUp
IconChevronUpDown
IconClear
IconClock
IconClockStroked
IconClose
IconCloud
IconCloudStroked
IconCloudUploadStroked
IconCode
IconCodeStroked
IconCoinMoney
IconCoinMoneyStroked
IconColorPalette
IconColumnsStroked
IconCommand
IconComment
IconCommentStroked
IconComponent
IconComponentPlaceholderStroked
IconComponentStroked
IconConfigStroked
IconConnectionPoint1
IconConnectionPoint2
IconContrast
IconCopy
IconCopyAdd
IconCopyStroked
IconCornerRadiusStroked
IconCreditCard
IconCreditCardStroked
IconCrop
IconCrossCircleStroked
IconCrossStroked
IconCrown
IconCrownStroked
IconCustomerSupport
IconCustomerSupportStroked
IconCustomize
IconDelete
IconDeleteStroked
IconDescend
IconDescend2
IconDesktop
IconDisc
IconDislikeThumb
IconDivide
IconDongchediLogo
IconDoubleChevronLeft
IconDoubleChevronRight
IconDownCircle
IconDownCircleStroked
IconDownload
IconDownloadStroked
IconDuration
IconEdit
IconEdit2
IconEdit2Stroked
IconEditStroked
IconElementStroked
IconEmoji
IconExit
IconExpand
IconExport
IconExternalOpen
IconExternalOpenStroked
IconEyeClosed
IconEyeClosedSolid
IconEyeClosedSolidStroked
IconEyeClosedStroked
IconEyeOpened
IconEyeOpenedStroked
IconEyedropper
IconFacebook
IconFaceuLogo
IconFastForward
IconFastFoward
IconFavoriteList
IconFeishuLogo
IconFemale
IconFigma
IconFile
IconFillStroked
IconFilledArrowDown
IconFilledArrowUp
IconFilpVertical
IconFilter
IconFilterStroked
IconFingerLeftStroked
IconFixedStroked
IconFlag
IconFlagStroked
IconFlipHorizontal
IconFlowChartStroked
IconFolder
IconFolderOpen
IconFolderOpenStroked
IconFolderStroked
IconFollowStroked
IconFont
IconFontColor
IconForward
IconForwardStroked
IconFullScreenStroked
IconGallery
IconGift
IconGiftStroked
IconGit
IconGithubLogo
IconGitlabLogo
IconGlobe
IconGlobeStroke
IconGlobeStrokeStroked
IconGlobeStroked
IconGridRectangle
IconGridSquare
IconGridStroked
IconGridView
IconGridView1
IconH1
IconH2
IconH3
IconH4
IconH5
IconH6
IconH7
IconH8
IconH9
IconHandle
IconHash
IconHeartStroked
IconHelm
IconHelpCircle
IconHelpCircleStroked
IconHistogram
IconHistory
IconHn
IconHome
IconHomeStroked
IconHorn
IconHornStroked
IconHourglass
IconHourglassStroked
IconIdCard
IconIdCardStroked
IconIdentity
IconImage
IconImageStroked
IconImport
IconInbox
IconIndenpentCornersStroked
IconIndentLeft
IconIndentRight
IconIndependentCornersStroked
IconInfoCircle
IconInherit
IconInheritStroked
IconInnerSectionStroked
IconInstagram
IconInteractiveStroked
IconInviteStroked
IconIssueStroked
IconItalic
IconJianying
IconKanban
IconKey
IconKeyStroked
IconLanguage
IconLayers
IconLeftCircle
IconLeftCircleStroked
IconLightningStroked
IconLikeHeart
IconLikeThumb
IconLineChartStroked
IconLineHeight
IconLink
IconList
IconListView
IconLive
IconLoading
IconLock
IconLockStroked
IconLoopTextStroked
IconMail
IconMailStroked
IconMailStroked1
IconMale
IconMapPin
IconMapPinStroked
IconMarginLeftStroked
IconMarginStroked
IconMark
IconMaximize
IconMaximize2
IconMaximize2Stroked
IconMember
IconMenu
IconMicrophone
IconMicrophoneOff
IconMicrophoneOffStroked
IconMicrophoneStroked
IconMiniPlayer
IconMinimize
IconMinus
IconMinusCircle
IconMinusCircleStroked
IconMinusStroked
IconModalStroked
IconMoneyExchangeStroked
IconMonitorStroked
IconMoon
IconMoonStroked
IconMore
IconMoreStroked
IconMusic
IconMusicNoteStroked
IconMute
IconMuteStroked
IconNineGridStroked
IconNoteMoney
IconNoteMoneyStroked
IconOption
IconOrderedList
IconOrderedListStroked
IconPaperclip
IconPaperclipStroked
IconPause
IconPercentage
IconPhone
IconPhoneStroke
IconPhoneStroked
IconPieChart2Stroked
IconPieChartStroked
IconPiechartH5Stroked
IconPipixiaLogo
IconPlay
IconPlayCircle
IconPlus
IconPlusCircle
IconPlusCircleStroked
IconPlusStroked
IconPriceTag
IconPrint
IconPrize
IconPrizeStroked
IconPulse
IconPuzzle
IconQingyan
IconQrCode
IconQuit
IconQuote
IconRadio
IconRankingCardStroked
IconRealSize
IconRealSizeStroked
IconRedo
IconRedoStroked
IconRefresh
IconRefresh2
IconRegExp
IconReply
IconReplyStroked
IconResso
IconRestart
IconRestore
IconRestoreStroked
IconRingChartStroked
IconRotate
IconRotationStroked
IconRoute
IconRowsStroked
IconSafe
IconSafeStroked
IconSave
IconSaveStroked
IconScan
IconScissors
IconScissorsStroked
IconSearch
IconSearchStroked
IconSectionStroked
IconSemiLogo
IconSend
IconSendMsgStroked
IconSendStroked
IconServer
IconServerStroked
IconSetting
IconSettingStroked
IconShare
IconShareMoneyStroked
IconShareStroked
IconShield
IconShieldStroked
IconShift
IconShoppingBag
IconShoppingBagStroked
IconShrink
IconShrinkScreenStroked
IconSidebar
IconSignal
IconSimilarity
IconSmallTriangleDown
IconSmallTriangleLeft
IconSmallTriangleRight
IconSmallTriangleTop
IconSmartphoneCheckStroked
IconSmartphoneStroked
IconSong
IconSonicStroked
IconSort
IconSortStroked
IconSourceControl
IconSpin
IconStackBarChartStroked
IconStar
IconStarStroked
IconStop
IconStopwatchStroked
IconStoryStroked
IconStrikeThrough
IconSun
IconSunStroked
IconSync
IconTabArrowStroked
IconTabsStroked
IconTaskMoneyStroked
IconTemplate
IconTemplateStroked
IconTerminal
IconTestScore
IconTestScoreStroked
IconText
IconTextRectangle
IconTextStroked
IconThumbUpStroked
IconTick
IconTickCircle
IconTicketCode
IconTicketCodeExchangeStroked
IconTicketCodeStroked
IconTiktokLogo
IconTop
IconTopCenterStroked
IconTopLeftStroked
IconTopRightStroked
IconTopbuzzLogo
IconToutiaoLogo
IconTransparentStroked
IconTreeTriangleDown
IconTreeTriangleRight
IconTriangleArrow
IconTriangleArrowVertical
IconTriangleDown
IconTriangleUp
IconTrueFalseStroked
IconTvCheckedStroked
IconTwitter
IconTypograph
IconUnChainStroked
IconUnderline
IconUndo
IconUnlink
IconUnlock
IconUnlockStroked
IconUpload
IconUploadError
IconUser
IconUserAdd
IconUserCardPhone
IconUserCardVideo
IconUserCardVideoStroked
IconUserCircle
IconUserCircleStroked
IconUserGroup
IconUserList
IconUserListStroked
IconUserSetting
IconUserStroked
IconVennChartStroked
IconVerify
IconVersionStroked
IconVideo
IconVideoDouyinStroked
IconVideoListStroked
IconVideoStroked
IconVideoUrlStroked
IconVigoLogo
IconVolume1
IconVolume1Stroked
IconVolume2
IconVolume2Stroked
IconVolumnSilent
IconVolumeSilentStroked
IconVoteStroked
IconVoteVideoStroked
IconWeibo
IconWholeWord
IconWifi
IconWindowAdaptionStroked
IconWrench
IconWrenchStroked
IconXiguaLogo
IconYoutube
IconAIBellLevel1
IconAIBellLevel2
IconAIBellLevel3
IconAIEditLevel1
IconAIEditLevel2
IconAIEditLevel3
IconAIFileLevel1
IconAIFileLevel2
IconAIFileLevel3
IconAIFiledLevel1
IconAIFiledLevel2
IconAIFiledLevel3
IconAIImageLevel1
IconAIImageLevel2
IconAIImageLevel3
IconAISearchLevel1
IconAISearchLevel2
IconAISearchLevel3
IconAIStrokeLevel1
IconAIStrokeLevel2
IconAIStrokeLevel3
IconAIWandLevel1
IconAIWandLevel2
IconAIWandLevel3
IconAILoading


@douyinfe/semi-icons-lab icon list:

IconAccessibility
IconAnchor
IconAutocomplete
IconAvatar
IconBackTop
IconBadge
IconBadgeStar
IconBanner
IconBreadcrumb
IconButton
IconCalendar
IconCard
IconCarousel
IconCascader
IconChangelog
IconChart
IconChat
IconCheckbox
IconCodeHighlight
IconCollapse
IconCollapsible
IconColorPlatte
IconColorPlatteNew
IconConfig
IconDarkMode
IconDatePicker
IconDescriptions
IconDivider
IconDropdown
IconEmpty
IconFaq
IconForm
IconGettingStarted
IconGrid
IconHeart
IconHighlight
IconImage
IconInput
IconInputNumber
IconIntro
IconJsonViewer
IconLayout
IconList
IconLocaleProvider
IconLottie
IconMarkdown
IconModal
IconNavigation
IconNotification
IconOverflow
IconPagination
IconPincode
IconPopconfirm
IconPopover
IconProgress
IconRadio
IconRating
IconScrollList
IconSelect
IconSideSheet
IconSkeleton
IconSlider
IconSpace
IconSpin
IconSteps
IconSwitch
IconTable
IconTabs
IconTag
IconTagInput
IconTimePicker
IconTimeline
IconToast
IconToken
IconTooltip
IconTransfer
IconTree
IconTreeSelect
IconTypography
IconUpload
IconVersionOne
IconVersionTwo
IconWebcomponents
IconWheelChair

</div>



```icon
```

## 代码演示

### 如何引入

```jsx import
import Icon, { IconHome } from '@douyinfe/semi-icons';
import { IconAvatar, IconCard } from '@douyinfe/semi-icons-lab';
```

### 基础使用
从`@douyinfe/semi-icons`包中引入图标

```jsx live=true
import React from 'react';
import { IconHome } from '@douyinfe/semi-icons';

() => <IconHome />;

```


### 旋转
从`@douyinfe/semi-icons`包中引入图标，自带尺寸、旋转、spin功能

```jsx live=true
import React from 'react';
import { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';

() => (
    <div>
        <IconHome size="small" />
        <IconEmoji rotate={180} />
        <IconSpin spin />
    </div>
);

```

### 尺寸
>
可以改变`font-size`来更改图标大小
>

Icon组件封装了size属性，可以更方便地定义图标尺寸，支持 `extra-small` (8x8)，`small` (12x12)， `default` (16x16)， `large` (20x20)， `extra-large` (24x24)，当size指定为`inherit`时，图标大小继承当前上下文字体大小


```jsx live=true
import React from 'react';
import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';

() => {
    // eslint-disable-next-line react/jsx-key
    const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
    const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
    let icons = types.map((type, i) => {
        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key: size }))}</div>;
    });
    return icons;
};
```

### 颜色
单色图标会自动继承外部容器 CSS 的 `color` 属性
你还可以通过给 Icon 设置 style props 来修改图标的颜色。

```jsx live=true
import React from 'react';
import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-icons';

() => (
    <div>
        <div style={{ color: '#E91E63' }} >
            <IconLikeHeart size="extra-large"/>
            <IconFlag size="extra-large"/>
        </div>
        <br/>
        <div>
            <IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
            <IconUnlock style={{ color: '#9C27B0' }} size="extra-large"/>
        </div>
    </div>
);
```

### 双色图标

双色图标可以通过 `fill` 属性设置颜色，支持 string 以及 string[]。

```jsx live=true
import React from 'react';
import { IconAIWandLevel2, IconAIFilledLevel2 } from '@douyinfe/semi-icons';

() => (
    <div>
        <IconAIWandLevel2 fill={['var(--semi-color-danger)', 'var(--semi-color-success)']} style={{ marginRight: 10 }} size="extra-large"/>
        <IconAIFilledLevel2 fill={'var(--semi-color-success)'} size="extra-large"/>
    </div>
);
```

### 多色按钮

多色图标，当前的多色按钮可传入四个颜色。可以通过 `fill` 属性设置颜色，支持 string 以及 string[]。

```jsx live=true
import React from 'react';
import { IconAIBellLevel3, IconAIWandLevel3, IconAIFilledLevel3 } from '@douyinfe/semi-icons';

() => (
    <div>
        <IconAIBellLevel3 style={{ marginRight: 10 }} size="extra-large"/>
        <IconAIWandLevel3 fill={['var(--semi-color-danger)', 'var(--semi-color-success)', 'var(--semi-color-primary)', 'var(--semi-color-warning)']} style={{ marginRight: 10 }} size="extra-large"/>
        <IconAIFilledLevel3 fill={['var(--semi-color-primary)', 'var(--semi-color-success)']} size="extra-large"/>
    </div>
);
```


### 自定义图标

可以使用自定义图标传入Icon组件。Icon组件支持 size、rotate、spin 等属性。

```jsx live=true
import React from 'react';
import { Icon } from '@douyinfe/semi-ui';

() => {
    function CustomIcon() {
        return <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
            <mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
                <circle cx="12" cy="12" r="11" fill="#A2845E"/>
            </mask>
            <g mask="url(#mask0)">
                <path fillRule="evenodd" clipRule="evenodd" d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z" fill="white"/>
            </g>
        </svg>;
    }
    return (
        <div>
            <Icon svg={<CustomIcon />} />
            <Icon svg={<CustomIcon />} rotate={180} />
        </div>
    );
};
```

### 使用svgr将svg文件转成ReactComponent
如果 Semi 提供的图标不足以满足业务需求，你也可以通过@svgr/webpack引入自定义图标，并以React组件形式使用

```
// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

import { Icon } from '@douyinfe/semi-ui';
import StarIcon from './star.svg';

<Icon svg={<StarIcon />} />
```



## API参考

### Icon

| 属性  | 说明        | 类型            | 默认值 |
|-------|-------------|-----------------|--------|
| className | 类名 | string | 无    |
| fill | 双色，多色图标的填充颜色 | string \| string[] | 无 |
| onClick | 单击图标的回调事件 | (e: Event) => void | 无    |
| onMouseDown | 鼠标按钮按下的回调事件 >=v1.21 | (e: Event) => void | 无    |
| onMouseEnter | 进入图标的回调事件 | (e: Event) => void | 无    |
| onMouseLeave | 离开图标的回调事件 | (e: Event) => void | 无    |
| onMouseMove | 移动鼠标的回调事件 >=v1.21 | (e: Event) => void | 无    |
| onMouseUp | 鼠标按钮抬起的回调事件 >=v1.21 | (e: Event) => void | 无    |
| rotate | 旋转度数 | number |   |
| size | 尺寸，支持`inherit`，`extra-small`，`small`， `default`， `large`， `extra-large` | string | `default`  |
| spin | 旋转动画 | boolean |   |
| style | 图标样式 | CSSProperties | 无    |
| svg | 图标内容 | ReactNode | 无    |


## Accessibility

### ARIA

- Icon 组件 role 为 img，它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为 `home`，如果你有更好的语义化名字，可以通过 aria-label 传入。

```jsx live=true
import React from 'react';
import { IconHome } from '@douyinfe/semi-icons';

() => <IconHome aria-label="back to homepage" />;
```

- Icon 内部的 svg 元素为装饰元素，默认设置了 aria-hidden 以不被屏幕阅读器阅读
