Components
    Basic · Icon

    Icon

    Semantic vector graphics.

    Icon List

    The default icon set includes filled, outlined, and AI icons. React uses @fibrous/semi-icons-react; Vue uses @fibrous/semi-icons-vue. Filled, outlined, and monochrome AI icons inherit the CSS color property. Bicolor and multicolor AI icons have default colors, which can be changed through fill.

    The color icon set is imported from the /lab entry of the corresponding icon package. It ships with that package, requires no separate installation, and its colors cannot be changed.

    @fibrous/semi-icons-react 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

    @fibrous/semi-icons-react/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

    Demos

    How to import

    import Icon, { IconHome } from '@fibrous/semi-icons-solid';
import { IconAvatar, IconCard } from '@fibrous/semi-icons-solid/lab';

    Basic usage

    Import icons from the icon package for your framework.

    Code
    import { IconHome } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return <IconHome />;
}

    Rotate & Spin

    Icons support size, rotation, and spin options.

    Code
    import { IconHome, IconEmoji, IconSpin } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return (
        <div>
            <IconHome size="small" />
            <IconEmoji rotate={180} />
            <IconSpin spin />
        </div>
    );
}

    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.

    Code
    import { For } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh, type IconSize } from '@fibrous/semi-icons-solid';

const icons = [IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh];
const sizes: IconSize[] = ['extra-small', 'small', 'default', 'large', 'extra-large'];

export default function IconDemo() {
    return (
        <For each={icons}>
            {(icon) => (
                <div style={{ 'margin-bottom': '4px' }}>
                    <For each={sizes}>{(size) => <Dynamic component={icon} size={size} />}</For>
                </div>
            )}
        </For>
    );
}

    Color

    Monochrome icons inherit the container's CSS color property. You can also set the Icon's style to change its color.


    Code
    import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return (
        <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>
    );
}

    Bicolor icon

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

    Code
    import { IconAIWandLevel2, IconAIFilledLevel2 } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return (
        <div>
            <IconAIWandLevel2 fill={['var(--semi-color-danger)', 'var(--semi-color-success)']} style={{ 'margin-right': '10px' }} size="extra-large" />
            <IconAIFilledLevel2 fill="var(--semi-color-success)" size="extra-large" />
        </div>
    );
}

    Multicolor icons

    Multicolor icons accept up to four colors. Set the colors through fill, which supports string and string[].

    Code
    import { IconAIBellLevel3, IconAIWandLevel3, IconAIFilledLevel3 } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return (
        <div>
            <IconAIBellLevel3 style={{ 'margin-right': '10px' }} size="extra-large" />
            <IconAIWandLevel3 fill={['var(--semi-color-danger)', 'var(--semi-color-success)', 'var(--semi-color-primary)', 'var(--semi-color-warning)']} style={{ 'margin-right': '10px' }} size="extra-large" />
            <IconAIFilledLevel3 fill={['var(--semi-color-primary)', 'var(--semi-color-success)']} size="extra-large" />
        </div>
    );
}

    Custom icon

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

    The svg prop takes a component rather than an element, and Icon passes fill to it.

    Code
    import { createUniqueId } from 'solid-js';
import { Icon } from '@fibrous/semi-ui-solid';

function CustomIcon() {
    const maskId = createUniqueId();
    return (
        <svg aria-hidden="true" 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={maskId} style={{ 'mask-type': 'alpha' }} maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
                <circle cx="12" cy="12" r="11" fill="#A2845E" />
            </mask>
            <g mask={`url(#${maskId})`}>
                <path
                    fill-rule="evenodd"
                    clip-rule="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>
    );
}

export default function IconDemo() {
    return (
        <div>
            <Icon svg={CustomIcon} />
            <Icon svg={CustomIcon} rotate={180} />
        </div>
    );
}

    API reference

    Icon

    Props

    PropertyDescriptionTypeDefault
    fillFill colors for bicolor and multicolor icons, as a string or an array of strings.IconFill-
    prefixClsCSS class prefix; build plugins can replace it.string"semi"
    rotateRotation angle in integer degrees.number-
    sizeIcon size: extra-small, small, default, large, extra-large or inherit, which uses the surrounding font size.IconSize-
    spinEnables the spinning animation.booleanfalse
    svgA custom SVG component, passed as a component rather than an element. Icon renders it and passes fill to it.TypeComponent<{ fill?: IconFill }>-
    typeAdds an icon type class name.string-

    class, style, ref, and native attributes and events (such as aria-* and onClick) land on the outer span.

    Accessibility

    ARIA

    • An Icon is decorative by default and has aria-hidden="true", so screen readers skip it. Keep the default when text sits next to the icon, or when the icon is inside a named button
    • When the icon itself conveys information, pass aria-label (or aria-labelledby); the Icon then has the img role
    • For a button or link that only holds an icon, set aria-label on the button or link rather than the icon
    • A focusable icon (e.g. used directly as a Tooltip trigger) is not hidden; give it an aria-label, and the Tooltip content serves as its description
    Code
    import { IconHome } from '@fibrous/semi-icons-solid';

export default function IconDemo() {
    return <IconHome aria-label="返回首页" />;
}
    • Built-in SVG icons have aria-hidden="true". Set the same attribute on custom SVG content, and give the outer Icon its accessible name.