> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Icons > Named icons, dynamic lookup, illustration wrappers, and their supported props. Import named icons from `twenty-ui/icon`. Use the surrounding control or visible text to communicate meaning. Decorative icons should be hidden from assistive technology. ```tsx theme={null} import { IconCheck } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const CompleteButton = () => ( ); ``` Button icon slots already size their icon and hide it from assistive technology, so the icon needs no extra props there. ## Supported props Tabler icons accept `size` (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 Use `IconsProvider` 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. ```tsx theme={null} import { Icon, IconsProvider } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const DynamicAction = ({ iconName }: { iconName: string }) => ( ); ``` `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. Class forwarded to the resolved icon. Color forwarded to the resolved icon. Icon name resolved through IconsProvider. Unknown names fall back to Icon123. Width and height forwarded to the resolved icon. Stroke width forwarded to the resolved icon. Styles forwarded to the resolved icon. ### IconsProvider props 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. ```tsx theme={null} import { IconCalendarEvent, IllustrationIconWrapper } from 'twenty-ui/icon'; export const CalendarIllustration = () => ( ); ``` Illustration content to center inside the wrapper. 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. Class applied to the SVG. The icon is always hidden from assistive technology. Width and height in pixels. ## Named icon catalog This catalog is generated from the public `twenty-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. * `Icon123` * `IconAdjustments` * `IconAlertCircle` * `IconAlertTriangle` * `IconAlignBoxLeftTop` * `IconAlignCenter` * `IconAlignLeft` * `IconAlignRight` * `IconApi` * `IconAppWindow` * `IconApps` * `IconArchive` * `IconArchiveOff` * `IconArrowBackUp` * `IconArrowBarToDown` * `IconArrowBarToDownDashed` * `IconArrowDown` * `IconArrowLeft` * `IconArrowMerge` * `IconArrowRight` * `IconArrowUp` * `IconArrowUpRight` * `IconArrowsDiagonal` * `IconArrowsSort` * `IconArrowsSplit2` * `IconArrowsVertical` * `IconAt` * `IconAxisX` * `IconAxisY` * `IconBadge2k` * `IconBaselineDensitySmall` * `IconBell` * `IconBlockquote` * `IconBold` * `IconBolt` * `IconBook` * `IconBook2` * `IconBookmark` * `IconBookmarkPlus` * `IconBox` * `IconBoxMultiple` * `IconBrackets` * `IconBracketsAngle` * `IconBracketsContain` * `IconBrain` * `IconBrandDaysCounter` * `IconBrandDocker` * `IconBrandGithub` * `IconBrandGoogle` * `IconBrandGraphql` * `IconBrandLinkedin` * `IconBrandNpm` * `IconBrandOpenai` * `IconBrandTypescript` * `IconBrandWhatsapp` * `IconBrandX` * `IconBriefcase` * `IconBroadcast` * `IconBrowserMaximize` * `IconBuildingSkyscraper` * `IconCalendar` * `IconCalendarDue` * `IconCalendarEvent` * `IconCalendarMonth` * `IconCalendarRepeat` * `IconCalendarTime` * `IconCalendarWeek` * `IconCalendarX` * `IconCancel` * `IconCaretLeft` * `IconCaretRight` * `IconChartBar` * `IconChartBarPopular` * `IconChartCandle` * `IconChartDots3` * `IconChartLine` * `IconChartPie` * `IconCheck` * `IconCheckbox` * `IconChevronDown` * `IconChevronLeft` * `IconChevronRight` * `IconChevronRightPipe` * `IconChevronUp` * `IconChevronsRight` * `IconCircle` * `IconCircleDashed` * `IconCircleDot` * `IconCircleOff` * `IconCirclePlus` * `IconCircleX` * `IconClick` * `IconClock` * `IconClockHour8` * `IconClockPlay` * `IconClockShare` * `IconCode` * `IconCodeCircle` * `IconCoins` * `IconColorSwatch` * `IconColumnInsertRight` * `IconColumns` * `IconCommand` * `IconComment` * `IconCompass` * `IconCopy` * `IconCopyPlus` * `IconCpu` * `IconCreativeCommonsSa` * `IconCreditCard` * `IconCsv` * `IconCube` * `IconCurrencyAfghani` * `IconCurrencyBahraini` * `IconCurrencyBaht` * `IconCurrencyDinar` * `IconCurrencyDirham` * `IconCurrencyDollar` * `IconCurrencyDollarAustralian` * `IconCurrencyDollarBrunei` * `IconCurrencyDollarCanadian` * `IconCurrencyDollarGuyanese` * `IconCurrencyDollarSingapore` * `IconCurrencyDong` * `IconCurrencyDram` * `IconCurrencyEuro` * `IconCurrencyFlorin` * `IconCurrencyForint` * `IconCurrencyFrank` * `IconCurrencyGuarani` * `IconCurrencyHryvnia` * `IconCurrencyIranianRial` * `IconCurrencyKip` * `IconCurrencyKroneCzech` * `IconCurrencyKroneDanish` * `IconCurrencyKroneSwedish` * `IconCurrencyLari` * `IconCurrencyLeu` * `IconCurrencyLira` * `IconCurrencyLyd` * `IconCurrencyManat` * `IconCurrencyNaira` * `IconCurrencyPaanga` * `IconCurrencyPeso` * `IconCurrencyPound` * `IconCurrencyQuetzal` * `IconCurrencyReal` * `IconCurrencyRenminbi` * `IconCurrencyRiyal` * `IconCurrencyRubel` * `IconCurrencyRufiyaa` * `IconCurrencyRupee` * `IconCurrencyRupeeNepalese` * `IconCurrencyShekel` * `IconCurrencySom` * `IconCurrencyTaka` * `IconCurrencyTenge` * `IconCurrencyTugrik` * `IconCurrencyWon` * `IconCurrencyYen` * `IconCurrencyYuan` * `IconCurrencyZloty` * `IconDatabase` * `IconDatabaseExport` * `IconDecimal` * `IconDeviceDesktop` * `IconDeviceFloppy` * `IconDoorEnter` * `IconDotsVertical` * `IconDownload` * `IconEdit` * `IconEditCircle` * `IconEraser` * `IconExclamationCircle` * `IconExternalLink` * `IconEye` * `IconEyeOff` * `IconEyeShare` * `IconEyeX` * `IconFile` * `IconFileCheck` * `IconFileExport` * `IconFileImport` * `IconFileInfo` * `IconFilePencil` * `IconFileText` * `IconFileUpload` * `IconFileZip` * `IconFiles` * `IconFilter` * `IconFilterCog` * `IconFilterOff` * `IconFilterPlus` * `IconFilterX` * `IconFilters` * `IconFlag` * `IconFlask` * `IconFocusCentered` * `IconFolder` * `IconFolderOpen` * `IconFolderPlus` * `IconFolderRoot` * `IconFolderSymlink` * `IconForbid` * `IconFrame` * `IconFunction` * `IconGauge` * `IconGitBranch` * `IconGitBranchDeleted` * `IconGitCommit` * `IconGizmo` * `IconGraph` * `IconGripVertical` * `IconH1` * `IconH2` * `IconH3` * `IconH4` * `IconH5` * `IconH6` * `IconHandClick` * `IconHandMove` * `IconHeadphones` * `IconHeart` * `IconHeartOff` * `IconHeartRateMonitor` * `IconHelp` * `IconHelpCircle` * `IconHierarchy` * `IconHierarchy2` * `IconHistory` * `IconHistoryToggle` * `IconHome` * `IconHourglassHigh` * `IconHours24` * `IconHttpDelete` * `IconHttpGet` * `IconHttpPatch` * `IconHttpPost` * `IconHttpPut` * `IconId` * `IconInbox` * `IconInfoCircle` * `IconInfoSquareRounded` * `IconItalic` * `IconJetpack` * `IconJson` * `IconKey` * `IconLanguage` * `IconLayersLinked` * `IconLayout` * `IconLayoutDashboard` * `IconLayoutGrid` * `IconLayoutGridAdd` * `IconLayoutKanban` * `IconLayoutList` * `IconLayoutNavbar` * `IconLayoutSidebar` * `IconLayoutSidebarLeftCollapse` * `IconLayoutSidebarLeftExpand` * `IconLayoutSidebarRight` * `IconLayoutSidebarRightCollapse` * `IconLayoutSidebarRightExpand` * `IconLego` * `IconLetterK` * `IconLibraryPlus` * `IconLifebuoy` * `IconLink` * `IconLinkOff` * `IconLinkPlus` * `IconList` * `IconListCheck` * `IconListDetails` * `IconListNumbers` * `IconListSearch` * `IconLoader` * `IconLock` * `IconLockOpen` * `IconLogin2` * `IconLogout` * `IconMail` * `IconMailCog` * `IconMailX` * `IconMap` * `IconMathMax` * `IconMathMin` * `IconMathXy` * `IconMaximize` * `IconMessage` * `IconMessageCircle` * `IconMessageCirclePlus` * `IconMicrophone` * `IconMinimize` * `IconMinus` * `IconMoneybag` * `IconMoodSmile` * `IconMoon` * `IconMouse2` * `IconNewSection` * `IconNorthStar` * `IconNoteOff` * `IconNotes` * `IconNumber` * `IconNumber123` * `IconNumber9` * `IconNumbers` * `IconPaint` * `IconPaperclip` * `IconPassword` * `IconPencil` * `IconPencilOff` * `IconPercentage` * `IconPerspective` * `IconPhone` * `IconPhoto` * `IconPhotoUp` * `IconPilcrow` * `IconPin` * `IconPinned` * `IconPinnedOff` * `IconPlayerPause` * `IconPlayerPlay` * `IconPlayerStop` * `IconPlaylistAdd` * `IconPlaystationSquare` * `IconPlug` * `IconPlus` * `IconPoint` * `IconPower` * `IconPresentation` * `IconPrinter` * `IconProgressCheck` * `IconPrompt` * `IconPuzzle` * `IconPuzzle2` * `IconQuestionMark` * `IconRadiusBottomLeft` * `IconRadiusBottomRight` * `IconRadiusTopLeft` * `IconRadiusTopRight` * `IconRefresh` * `IconRefreshAlert` * `IconRefreshDot` * `IconRelationManyToMany` * `IconRelationOneToMany` * `IconRelationOneToOne` * `IconReload` * `IconReorder` * `IconRepeat` * `IconRestore` * `IconRobot` * `IconRocket` * `IconRotate` * `IconRotate2` * `IconRowInsertBottom` * `IconRowInsertTop` * `IconSearch` * `IconSend` * `IconServer` * `IconServer2` * `IconSettings` * `IconSettings2` * `IconSettingsAutomation` * `IconSettingsBolt` * `IconShare` * `IconShare2` * `IconShield` * `IconShoppingBag` * `IconSitemap` * `IconSlash` * `IconSortAZ` * `IconSortAscending` * `IconSortAscendingLetters` * `IconSortAscendingNumbers` * `IconSortDescending` * `IconSortDescendingLetters` * `IconSortDescendingNumbers` * `IconSortZA` * `IconSparkles` * `IconSpy` * `IconSql` * `IconSquare` * `IconSquareCheck` * `IconSquareKey` * `IconSquareNumber1` * `IconSquareNumber2` * `IconSquareNumber3` * `IconSquareNumber4` * `IconSquareNumber5` * `IconSquareNumber6` * `IconSquareNumber7` * `IconSquareNumber8` * `IconSquareNumber9` * `IconSquarePlus` * `IconSquareRoundedCheck` * `IconSquareRoundedX` * `IconSquareX` * `IconStack2` * `IconStairs` * `IconStar` * `IconStatusChange` * `IconStepInto` * `IconStrikethrough` * `IconSum` * `IconSun` * `IconSunMoon` * `IconSwitchHorizontal` * `IconTable` * `IconTag` * `IconTags` * `IconTarget` * `IconTargetArrow` * `IconTerminal` * `IconTestPipe` * `IconTextCaption` * `IconTextSize` * `IconTextWrap` * `IconTimeDuration30` * `IconTimeDuration60` * `IconTimelineEvent` * `IconTool` * `IconTransform` * `IconTrash` * `IconTrashOff` * `IconTrashX` * `IconTrendingDown` * `IconTrendingUp` * `IconTypography` * `IconUnderline` * `IconUnlink` * `IconUpload` * `IconUser` * `IconUserCircle` * `IconUserCog` * `IconUserPin` * `IconUserPlus` * `IconUsers` * `IconVariable` * `IconVariablePlus` * `IconVersions` * `IconVersionsOff` * `IconVideo` * `IconWand` * `IconWebhook` * `IconWindow` * `IconWorld` * `IconWorldWww` * `IconX` ### `color`, `size`, `stroke` Supported props: `color`, `size`, `stroke`. Other native attributes are not forwarded. * `IconAddressBook` * `IconChartBarHorizontal` ### `size` Supported props: `size`. Other native attributes are not forwarded. * `IconBrandAnthropic` * `IconBrandGemini` * `IconBrandGroq` * `IconBrandMistral` * `IconGmail` * `IconGoogle` * `IconGoogleCalendar` * `IconLockCustom` * `IconMicrosoft` * `IconMicrosoftCalendar` * `IconMicrosoftOutlook` * `IconModelClaude` * `IllustrationIconArray` * `IllustrationIconCalendarEvent` * `IllustrationIconCalendarTime` * `IllustrationIconCurrency` * `IllustrationIconFile` * `IllustrationIconJson` * `IllustrationIconLink` * `IllustrationIconMail` * `IllustrationIconManyToMany` * `IllustrationIconMap` * `IllustrationIconNumbers` * `IllustrationIconOneToMany` * `IllustrationIconOneToOne` * `IllustrationIconPhone` * `IllustrationIconSetting` * `IllustrationIconStar` * `IllustrationIconTag` * `IllustrationIconTags` * `IllustrationIconText` * `IllustrationIconToggle` * `IllustrationIconUid` * `IllustrationIconUser` ### `color`, `size` Supported props: `color`, `size`. Other native attributes are not forwarded. * `IconBrandTypesafeAi` * `IconBrandXai` * `IconProviderOpenai` ### `size`, `stroke` Supported props: `size`, `stroke`. Other native attributes are not forwarded. * `IconRelationManyToOne` * `IconTrashXOff` * `IconTwentyStar` * `IconTwentyStarFilled` ### `aria-hidden`, `className`, `color`, `size`, `stroke` Supported props: `aria-hidden`, `className`, `color`, `size`, `stroke`. Other native attributes are not forwarded. * `IconSparkle2`