> ## 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. # Iconos > Iconos con nombre, búsqueda dinámica, contenedores de ilustraciones y sus props compatibles. ## Resumen Importa iconos con nombre desde `twenty-ui/icon`. Usa el control circundante o el texto visible para comunicar el significado. Los iconos decorativos deben ocultarse de la tecnología de asistencia. ```tsx theme={null} import { IconCheck } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const CompleteButton = () => ( ); ``` Los espacios para iconos de los botones ya ajustan el tamaño de su icono y lo ocultan de la tecnología de asistencia, por lo que el icono no necesita props adicionales allí. ## Props compatibles Los iconos de Tabler aceptan `size` (número o longitud CSS), `stroke` (ancho de trazo), `color` y atributos y refs SVG nativos. Los iconos personalizados de marca e ilustración solo aceptan las props enumeradas en el catálogo generado a continuación. Sus valores predeterminados de tamaño varían; pasa `size` para obtener un resultado coherente. Los colores de marca pueden estar fijados por la ilustración, por lo que la anulación de color solo está disponible donde se indica. Los iconos personalizados que no aceptan atributos de accesibilidad necesitan un contenedor con la etiqueta adecuada o `aria-hidden`. `className` y `style` también están disponibles solo donde se indican. Importa un icono específico cuando sea posible para evitar cargar el catálogo dinámico. Los iconos exportados mantienen el ancho solicitado en los diseños flex, incluso dentro de botones. Permite que el texto adyacente se trunque o que el elemento principal se ajuste o se desplace cuando el espacio sea limitado. Cuando un icono admite `className` o `style`, puedes anular explícitamente `flex-shrink` para un diseño que lo necesite. Los contenedores de ilustraciones también conservan su ancho. ## Nombres de iconos dinámicos Usa `IconsProvider` e `Icon` cuando los nombres se eligen en tiempo de ejecución. El proveedor carga el mapa completo de iconos de forma asíncrona; los paquetes creados sin división de código, como los componentes de front-end, incluyen el mapa completo. Antes de que se complete la carga y para nombres desconocidos, `Icon` representa `Icon123`. El mapa dinámico difiere del catálogo de exportaciones con nombre; no supongas que todas las exportaciones de marca o ilustración se pueden resolver por nombre. ```tsx theme={null} import { Icon, IconsProvider } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const DynamicAction = ({ iconName }: { iconName: string }) => ( ); ``` `useIcons()` expone `getIcon(name, customDefaultIcon)` y `getIcons()` dentro del mismo proveedor. `getIcons()` devuelve inicialmente un mapa vacío. `getIcon` usa la alternativa con nombre cuando existe y, después, `Icon123`. El proveedor acepta un elemento hijo; usa un fragmento para varios hijos. ### Props de Icon **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. ### Props de IconsProvider **children** `Element` *required* One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously. ## Contenedor de ilustración `IllustrationIconWrapper` proporciona el estilo del contenedor de ilustración y reenvía atributos div nativos, hijos, estilos y refs. Cada exportación de `IllustrationIcon*` ya se representa dentro de él, así que usa el contenedor solo para enmarcar tu propio contenido de ilustración. ```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. ## Icono de cargador animado `ThinkingOrbitLoaderIcon` se anima continuamente mientras está montado. Es decorativo y siempre está oculto de la tecnología de asistencia. Muestra el texto de carga por separado y monta o elimina el icono según el estado de la aplicación. **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. ## Catálogo de iconos con nombre Este catálogo se genera a partir de las exportaciones públicas de `twenty-ui/icon` y agrupa los iconos según las props que aceptan. ### 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.