Icon

Icon List

The default icon set @douyinfe/semi-icons includes three sets of icons: surface, linear, and AI. Surface icons, linear icons, and monochrome icons in AI icons have no color by default, and the color can be changed through the css color attribute. Dual-color and multi-color icons in AI icons have default colors, which can be changed via fill.

AI icons are available since v2.86.0.

@douyinfe/semi-icons-lab is a color icon set, which needs to be installed separately and cannot be changed. The lab icon set is provided after v2.48

@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 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 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

@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


Fill Icons
Stroked Icons
AI IconsNew
Accessibility  
Alert  
Arrow  
Basic  
Brands  
Building  
Business  
Code  
Communication  
Device  
Files&Folder  
Interface  
Layout  
Magic Customized  
Music  
Objects  
Photo&Video  
Time  
User  
Writing  
Basic  
Business  
Chart & Diagram  
Communication  
Device  
Editor  
Files&Folder  
Interface  
Magic Customized  
Music  
Objects  
Photo&Video  
Time  
One Color  
Two Color  
Multiple Color  
Colorful Icons
Common

Demos

How to import


import Icon, { IconHome } from '@douyinfe/semi-icons';

Basic usage

Import icons from the @douyinfe/semi-icons package

Rotate & Spin

Introduce icons from the @douyinfe/semi-icons package, with its own size, rotation, and spin functions

Size

You can change the font-size to change the icon size

The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports extra-small (8x8), small (12x12), default (16x16), large (20x20), extra-large (24x24), When size is specified as inherit, the icon size inherits the current context font size.

Color

The icon will automatically inherit the color property of the external container CSS You can also modify the color of the icon by setting style props to the Icon.

Bicolor icon

The color of the two-color icon can be set through the fill attribute, which supports string and string[].

Multicolor buttons

Multi-color icon, the current multi-color button can pass in four colors. The color can be set through the fill attribute, which supports string and string[].

Custom icon

You can use custom icons to pass in Icon components Icon component supports size, rotate, spin and other attributes

Use svgr to convert svg files into ReactComponent

If the icons provided by Semi are not enough to meet business needs, you can also introduce custom icons through @svgr/webpack and use them as React components


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

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

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

API reference

Properties	Illustrate	Type	Default
className	class name	string	none
fill	Fill color for bicolor, multicolor icons	string \| string[]	None
onClick	Callback event of clicking the icon	(e: Event) => void	None
onMouseDown	The callback event of mouse button press >=v1.21	(e: Event) => void	None
onMouseEnter	Callback event of entering icon	(e: Event) => void	None
onMouseLeave	Callback event of leaving icon	(e: Event) => void	None
onMouseMove	Callback event of moving the mouse >=v1.21	(e: Event) => void	None
onMouseUp	Callback event when the mouse button is raised >=v1.21	(e: Event) => void	None
rotate	degree of rotation	number
size	Size, supports `inherit`, `extra-small`, `small`, `default`, `large`, `extra-large`	string	`default`
spin	spin animation	boolean
style	Icon style	CSSProperties	None
svg	Icon content	ReactNode	None

Accessibility

ARIA

The Icon component role is img, and its aria-label defaults to the component's file name

The svg element inside Icon is a decorative element, and aria-hidden is set by default to prevent it from being read by screen readers