> ## 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. # Icone > Icone denominate, ricerca dinamica, wrapper per illustrazioni e relative proprietà supportate. ## Panoramica Importa le icone denominate da `twenty-ui/icon`. Usa il controllo circostante o il testo visibile per comunicare il significato. Le icone decorative devono essere nascoste alla tecnologia assistiva. ```tsx theme={null} import { IconCheck } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const CompleteButton = () => ( ); ``` Gli slot delle icone dei pulsanti dimensionano già la relativa icona e la nascondono alla tecnologia assistiva, quindi l'icona non necessita di proprietà aggiuntive in quel punto. ## Proprietà supportate Le icone Tabler accettano `size` (numero o lunghezza CSS), `stroke` (spessore del tratto), `color` e attributi e ref SVG nativi. Le icone personalizzate del brand e delle illustrazioni accettano solo le proprietà elencate nel catalogo generato di seguito. Le dimensioni predefinite variano; passa `size` per un risultato coerente. I colori del brand possono essere fissati dalla grafica, quindi una sostituzione del colore è disponibile solo dove elencata. Le icone personalizzate che non accettano attributi di accessibilità necessitano di un wrapper con l'etichetta appropriata o `aria-hidden`. `className` e `style` sono disponibili solo dove elencati. Quando possibile, importa un'icona specifica per evitare di caricare il catalogo dinamico. Le icone esportate mantengono la larghezza richiesta nei layout flex, anche all'interno dei pulsanti. Consenti al testo adiacente di troncare oppure al contenitore padre di andare a capo o scorrere quando lo spazio è limitato. Quando un'icona supporta `className` o `style`, puoi sovrascrivere esplicitamente `flex-shrink` per un layout che ne ha bisogno. Anche i contenitori delle illustrazioni mantengono la propria larghezza. ## Nomi dinamici delle icone Usa `IconsProvider` e `Icon` quando i nomi vengono scelti in fase di esecuzione. Il provider carica in modo asincrono la mappa completa delle icone; i bundle creati senza code splitting, come i componenti front, includono l'intera mappa. Prima del completamento del caricamento e per i nomi sconosciuti, `Icon` esegue il rendering di `Icon123`. La mappa dinamica differisce dal catalogo delle esportazioni denominate; non presumere che ogni esportazione del brand o dell'illustrazione possa essere risolta in base al nome. ```tsx theme={null} import { Icon, IconsProvider } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const DynamicAction = ({ iconName }: { iconName: string }) => ( ); ``` `useIcons()` espone `getIcon(name, customDefaultIcon)` e `getIcons()` all'interno dello stesso provider. `getIcons()` restituisce inizialmente una mappa vuota. `getIcon` usa il fallback denominato quando esiste, quindi `Icon123`. Il provider accetta un elemento figlio; usa un frammento per più elementi figli. ### Proprietà delle icone **aria-hidden** `boolean` Hides a decorative icon from assistive technology. **className** `string` Class forwarded to the resolved icon. **color** `string` Color forwarded to the resolved icon. **name** `string` *required* Icon name resolved through IconsProvider. Unknown names fall back to Icon123. **size** `string | number` Width and height forwarded to the resolved icon. **stroke** `string | number` Stroke width forwarded to the resolved icon. **style** `CSSProperties` Styles forwarded to the resolved icon. ### Proprietà di IconsProvider **children** `Element` *required* One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously. ## Wrapper per illustrazioni `IllustrationIconWrapper` fornisce lo stile del contenitore dell'illustrazione e inoltra attributi div nativi, elementi figli, stili e ref. Ogni esportazione `IllustrationIcon*` esegue già il rendering al suo interno, quindi usa il wrapper solo per incorniciare il contenuto della tua illustrazione. ```tsx theme={null} import { IconCalendarEvent, IllustrationIconWrapper } from 'twenty-ui/icon'; export const CalendarIllustration = () => ( ); ``` **children** `ReactNode` Illustration content to center inside the wrapper. **className** `string` Class merged with the illustration wrapper styling. ## Icona del caricatore animato `ThinkingOrbitLoaderIcon` viene animata continuamente mentre è montata. È decorativa ed è sempre nascosta alla tecnologia assistiva. Mostra separatamente il testo di caricamento e monta o rimuovi l'icona in base allo stato dell'applicazione. **className** `string` Class applied to the SVG. The icon is always hidden from assistive technology. **size** `string | number` (default: 14) Width and height in pixels. ## Catalogo delle icone denominate Questo catalogo è generato dalle esportazioni pubbliche di `twenty-ui/icon` e raggruppa le icone in base alle proprietà che accettano. ### 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` * `IconBellOff` * `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` * `IconColumnInsertLeft` * `IconColumnInsertRight` * `IconColumns` * `IconCommand` * `IconComment` * `IconCompass` * `IconCopy` * `IconCopyPlus` * `IconCornerDownRight` * `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` * `IconForms` * `IconFrame` * `IconFunction` * `IconGauge` * `IconGitBranch` * `IconGitBranchDeleted` * `IconGitCommit` * `IconGizmo` * `IconGraph` * `IconGripHorizontal` * `IconGripVertical` * `IconH1` * `IconH2` * `IconH3` * `IconH4` * `IconH5` * `IconH6` * `IconHandClick` * `IconHandMove` * `IconHash` * `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` * `IconMoodPlus` * `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` * `IconTerminal2` * `IconTestPipe` * `IconTextCaption` * `IconTextSize` * `IconTextWrap` * `IconTimeDuration30` * `IconTimeDuration60` * `IconTimelineEvent` * `IconTool` * `IconTransform` * `IconTrash` * `IconTrashOff` * `IconTrashX` * `IconTrendingDown` * `IconTrendingUp` * `IconTypography` * `IconUnderline` * `IconUnlink` * `IconUpload` * `IconUser` * `IconUserCircle` * `IconUserCog` * `IconUserOff` * `IconUserPin` * `IconUserPlus` * `IconUsers` * `IconUsersGroup` * `IconVariable` * `IconVariablePlus` * `IconVersions` * `IconVersionsOff` * `IconVideo` * `IconWand` * `IconWebhook` * `IconWindow` * `IconWorld` * `IconWorldWww` * `IconX` * `IconZzz` * `IconZzzOff` ### `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` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.