twenty-ui/icon. Use the surrounding control or visible text to communicate meaning. Decorative icons should be hidden from assistive technology.
Supported props
Tabler icons acceptsize (number or CSS length), stroke (stroke width), color, and native SVG attributes and refs. Custom brand and illustration icons accept only the props listed in the generated catalog below. Their sizing defaults vary; pass size for a consistent result. Brand colors can be fixed by the artwork, so a color override is available only where listed.
Custom icons that do not accept accessible attributes need a wrapper with the appropriate label or aria-hidden. className and style are also available only where listed. Import a specific icon when possible to avoid loading the dynamic catalog.
Dynamic icon names
UseIconsProvider and Icon when names are chosen at runtime. The provider loads the complete icon map asynchronously; bundles built without code splitting, such as front components, include the whole map. Before loading completes, and for unknown names, Icon renders Icon123. The dynamic map differs from the named export catalog; do not assume every brand or illustration export can be resolved by name.
useIcons() exposes getIcon(name, customDefaultIcon) and getIcons() inside the same provider. getIcons() initially returns an empty map. getIcon uses the named fallback when it exists, then Icon123. The provider accepts one child element; use a fragment for multiple children.
Icon props
Hides a decorative icon from assistive technology.
string
Class forwarded to the resolved icon.
string
Color forwarded to the resolved icon.
string
required
Icon name resolved through IconsProvider. Unknown names fall back to Icon123.
string | number
Width and height forwarded to the resolved icon.
string | number
Stroke width forwarded to the resolved icon.
CSSProperties
Styles forwarded to the resolved icon.
IconsProvider props
Element
required
One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously.
Illustration wrapper
IllustrationIconWrapper supplies the illustration container styling and forwards native div attributes, children, styles, and refs. Every IllustrationIcon* export already renders inside it, so use the wrapper only to frame your own illustration content.
ReactNode
Illustration content to center inside the wrapper.
string
Class merged with the illustration wrapper styling.
Animated loader icon
ThinkingOrbitLoaderIcon animates continuously while mounted. It is decorative and always hidden from assistive technology. Show loading text separately and mount or remove the icon according to application state.
string
Class applied to the SVG. The icon is always hidden from assistive technology.
string | number
default:"14"
Width and height in pixels.
Named icon catalog
This catalog is generated from the publictwenty-ui/icon exports and groups icons by the props they accept.
SVG icons
Supported props:color, size, stroke, title. Native SVG attributes and refs are also accepted.
Icon123IconAdjustmentsIconAlertCircleIconAlertTriangleIconAlignBoxLeftTopIconAlignCenterIconAlignLeftIconAlignRightIconApiIconAppWindowIconAppsIconArchiveIconArchiveOffIconArrowBackUpIconArrowBarToDownIconArrowBarToDownDashedIconArrowDownIconArrowLeftIconArrowMergeIconArrowRightIconArrowUpIconArrowUpRightIconArrowsDiagonalIconArrowsSortIconArrowsSplit2IconArrowsVerticalIconAtIconAxisXIconAxisYIconBadge2kIconBaselineDensitySmallIconBellIconBlockquoteIconBoldIconBoltIconBookIconBook2IconBookmarkIconBookmarkPlusIconBoxIconBoxMultipleIconBracketsIconBracketsAngleIconBracketsContainIconBrainIconBrandDaysCounterIconBrandDockerIconBrandGithubIconBrandGoogleIconBrandGraphqlIconBrandLinkedinIconBrandNpmIconBrandOpenaiIconBrandTypescriptIconBrandWhatsappIconBrandXIconBriefcaseIconBroadcastIconBrowserMaximizeIconBuildingSkyscraperIconCalendarIconCalendarDueIconCalendarEventIconCalendarMonthIconCalendarRepeatIconCalendarTimeIconCalendarWeekIconCalendarXIconCancelIconCaretLeftIconCaretRightIconChartBarIconChartBarPopularIconChartCandleIconChartDots3IconChartLineIconChartPieIconCheckIconCheckboxIconChevronDownIconChevronLeftIconChevronRightIconChevronRightPipeIconChevronUpIconChevronsRightIconCircleIconCircleDashedIconCircleDotIconCircleOffIconCirclePlusIconCircleXIconClickIconClockIconClockHour8IconClockPlayIconClockShareIconCodeIconCodeCircleIconCoinsIconColorSwatchIconColumnInsertRightIconColumnsIconCommandIconCommentIconCompassIconCopyIconCopyPlusIconCpuIconCreativeCommonsSaIconCreditCardIconCsvIconCubeIconCurrencyAfghaniIconCurrencyBahrainiIconCurrencyBahtIconCurrencyDinarIconCurrencyDirhamIconCurrencyDollarIconCurrencyDollarAustralianIconCurrencyDollarBruneiIconCurrencyDollarCanadianIconCurrencyDollarGuyaneseIconCurrencyDollarSingaporeIconCurrencyDongIconCurrencyDramIconCurrencyEuroIconCurrencyFlorinIconCurrencyForintIconCurrencyFrankIconCurrencyGuaraniIconCurrencyHryvniaIconCurrencyIranianRialIconCurrencyKipIconCurrencyKroneCzechIconCurrencyKroneDanishIconCurrencyKroneSwedishIconCurrencyLariIconCurrencyLeuIconCurrencyLiraIconCurrencyLydIconCurrencyManatIconCurrencyNairaIconCurrencyPaangaIconCurrencyPesoIconCurrencyPoundIconCurrencyQuetzalIconCurrencyRealIconCurrencyRenminbiIconCurrencyRiyalIconCurrencyRubelIconCurrencyRufiyaaIconCurrencyRupeeIconCurrencyRupeeNepaleseIconCurrencyShekelIconCurrencySomIconCurrencyTakaIconCurrencyTengeIconCurrencyTugrikIconCurrencyWonIconCurrencyYenIconCurrencyYuanIconCurrencyZlotyIconDatabaseIconDatabaseExportIconDecimalIconDeviceDesktopIconDeviceFloppyIconDoorEnterIconDotsVerticalIconDownloadIconEditIconEditCircleIconEraserIconExclamationCircleIconExternalLinkIconEyeIconEyeOffIconEyeShareIconEyeXIconFileIconFileCheckIconFileExportIconFileImportIconFileInfoIconFilePencilIconFileTextIconFileUploadIconFileZipIconFilesIconFilterIconFilterCogIconFilterOffIconFilterPlusIconFilterXIconFiltersIconFlagIconFlaskIconFocusCenteredIconFolderIconFolderOpenIconFolderPlusIconFolderRootIconFolderSymlinkIconForbidIconFrameIconFunctionIconGaugeIconGitBranchIconGitBranchDeletedIconGitCommitIconGizmoIconGraphIconGripVerticalIconH1IconH2IconH3IconH4IconH5IconH6IconHandClickIconHandMoveIconHeadphonesIconHeartIconHeartOffIconHeartRateMonitorIconHelpIconHelpCircleIconHierarchyIconHierarchy2IconHistoryIconHistoryToggleIconHomeIconHourglassHighIconHours24IconHttpDeleteIconHttpGetIconHttpPatchIconHttpPostIconHttpPutIconIdIconInboxIconInfoCircleIconInfoSquareRoundedIconItalicIconJetpackIconJsonIconKeyIconLanguageIconLayersLinkedIconLayoutIconLayoutDashboardIconLayoutGridIconLayoutGridAddIconLayoutKanbanIconLayoutListIconLayoutNavbarIconLayoutSidebarIconLayoutSidebarLeftCollapseIconLayoutSidebarLeftExpandIconLayoutSidebarRightIconLayoutSidebarRightCollapseIconLayoutSidebarRightExpandIconLegoIconLetterKIconLibraryPlusIconLifebuoyIconLinkIconLinkOffIconLinkPlusIconListIconListCheckIconListDetailsIconListNumbersIconListSearchIconLoaderIconLockIconLockOpenIconLogin2IconLogoutIconMailIconMailCogIconMailXIconMapIconMathMaxIconMathMinIconMathXyIconMaximizeIconMessageIconMessageCircleIconMessageCirclePlusIconMicrophoneIconMinimizeIconMinusIconMoneybagIconMoodSmileIconMoonIconMouse2IconNewSectionIconNorthStarIconNoteOffIconNotesIconNumberIconNumber123IconNumber9IconNumbersIconPaintIconPaperclipIconPasswordIconPencilIconPencilOffIconPercentageIconPerspectiveIconPhoneIconPhotoIconPhotoUpIconPilcrowIconPinIconPinnedIconPinnedOffIconPlayerPauseIconPlayerPlayIconPlayerStopIconPlaylistAddIconPlaystationSquareIconPlugIconPlusIconPointIconPowerIconPresentationIconPrinterIconProgressCheckIconPromptIconPuzzleIconPuzzle2IconQuestionMarkIconRadiusBottomLeftIconRadiusBottomRightIconRadiusTopLeftIconRadiusTopRightIconRefreshIconRefreshAlertIconRefreshDotIconRelationManyToManyIconRelationOneToManyIconRelationOneToOneIconReloadIconReorderIconRepeatIconRestoreIconRobotIconRocketIconRotateIconRotate2IconRowInsertBottomIconRowInsertTopIconSearchIconSendIconServerIconServer2IconSettingsIconSettings2IconSettingsAutomationIconSettingsBoltIconShareIconShare2IconShieldIconShoppingBagIconSitemapIconSlashIconSortAZIconSortAscendingIconSortAscendingLettersIconSortAscendingNumbersIconSortDescendingIconSortDescendingLettersIconSortDescendingNumbersIconSortZAIconSparklesIconSpyIconSqlIconSquareIconSquareCheckIconSquareKeyIconSquareNumber1IconSquareNumber2IconSquareNumber3IconSquareNumber4IconSquareNumber5IconSquareNumber6IconSquareNumber7IconSquareNumber8IconSquareNumber9IconSquarePlusIconSquareRoundedCheckIconSquareRoundedXIconSquareXIconStack2IconStairsIconStarIconStatusChangeIconStepIntoIconStrikethroughIconSumIconSunIconSunMoonIconSwitchHorizontalIconTableIconTagIconTagsIconTargetIconTargetArrowIconTerminalIconTestPipeIconTextCaptionIconTextSizeIconTextWrapIconTimeDuration30IconTimeDuration60IconTimelineEventIconToolIconTransformIconTrashIconTrashOffIconTrashXIconTrendingDownIconTrendingUpIconTypographyIconUnderlineIconUnlinkIconUploadIconUserIconUserCircleIconUserCogIconUserPinIconUserPlusIconUsersIconVariableIconVariablePlusIconVersionsIconVersionsOffIconVideoIconWandIconWebhookIconWindowIconWorldIconWorldWwwIconX
color, size, stroke
Supported props: color, size, stroke. Other native attributes are not forwarded.
IconAddressBookIconChartBarHorizontal
size
Supported props: size. Other native attributes are not forwarded.
IconBrandAnthropicIconBrandGeminiIconBrandGroqIconBrandMistralIconGmailIconGoogleIconGoogleCalendarIconLockCustomIconMicrosoftIconMicrosoftCalendarIconMicrosoftOutlookIconModelClaudeIllustrationIconArrayIllustrationIconCalendarEventIllustrationIconCalendarTimeIllustrationIconCurrencyIllustrationIconFileIllustrationIconJsonIllustrationIconLinkIllustrationIconMailIllustrationIconManyToManyIllustrationIconMapIllustrationIconNumbersIllustrationIconOneToManyIllustrationIconOneToOneIllustrationIconPhoneIllustrationIconSettingIllustrationIconStarIllustrationIconTagIllustrationIconTagsIllustrationIconTextIllustrationIconToggleIllustrationIconUidIllustrationIconUser
color, size
Supported props: color, size. Other native attributes are not forwarded.
IconBrandTypesafeAiIconBrandXaiIconProviderOpenai
size, stroke
Supported props: size, stroke. Other native attributes are not forwarded.
IconRelationManyToOneIconTrashXOffIconTwentyStarIconTwentyStarFilled
aria-hidden, className, color, size, stroke
Supported props: aria-hidden, className, color, size, stroke. Other native attributes are not forwarded.
IconSparkle2