> ## 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. # Pictograme > Pictograme denumite, căutare dinamică, învelișuri pentru ilustrații și proprietățile acceptate de acestea. ## Prezentare generală Importă pictograme denumite din `twenty-ui/icon`. Folosește controlul înconjurător sau textul vizibil pentru a comunica semnificația. Pictogramele decorative trebuie ascunse de tehnologia de asistență. ```tsx theme={null} import { IconCheck } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const CompleteButton = () => ( ); ``` Sloturile de pictograme ale butoanelor dimensionează deja pictograma și o ascund de tehnologia de asistență, astfel încât pictograma nu necesită proprietăți suplimentare acolo. ## Proprietăți acceptate Pictogramele Tabler acceptă `size` (număr sau lungime CSS), `stroke` (grosimea conturului), `color` și atribute și referințe SVG native. Pictogramele personalizate de marcă și pentru ilustrații acceptă numai proprietățile enumerate în catalogul generat de mai jos. Dimensiunile lor implicite variază; transmite `size` pentru un rezultat consecvent. Culorile de marcă pot fi fixate de ilustrație, astfel încât suprascrierea culorii este disponibilă numai unde este indicată. Pictogramele personalizate care nu acceptă atribute de accesibilitate necesită un înveliș cu eticheta corespunzătoare sau `aria-hidden`. `className` și `style` sunt, de asemenea, disponibile numai unde sunt indicate. Importă o pictogramă specifică atunci când este posibil pentru a evita încărcarea catalogului dinamic. Pictogramele exportate își păstrează lățimea solicitată în aspectele flex, inclusiv în butoane. Permite textului adiacent să fie trunchiat sau permite părintelui să încadreze pe rândul următor ori să deruleze când spațiul este limitat. Atunci când o pictogramă acceptă `className` sau `style`, poți suprascrie explicit `flex-shrink` pentru un aspect care are nevoie de acest lucru. Containerele pentru ilustrații își păstrează, de asemenea, lățimea. ## Nume de pictograme dinamice Folosește `IconsProvider` și `Icon` când numele sunt alese în timpul rulării. Furnizorul încarcă asincron harta completă a pictogramelor; pachetele construite fără împărțirea codului, precum componentele front-end, includ întreaga hartă. Înainte ca încărcarea să se finalizeze și pentru nume necunoscute, `Icon` redă `Icon123`. Harta dinamică diferă de catalogul de exporturi denumite; nu presupune că fiecare export de marcă sau ilustrație poate fi rezolvat după nume. ```tsx theme={null} import { Icon, IconsProvider } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const DynamicAction = ({ iconName }: { iconName: string }) => ( ); ``` `useIcons()` expune `getIcon(name, customDefaultIcon)` și `getIcons()` în cadrul aceluiași furnizor. `getIcons()` returnează inițial o hartă goală. `getIcon` folosește alternativa denumită când aceasta există, apoi `Icon123`. Furnizorul acceptă un element copil; folosește un fragment pentru mai mulți copii. ### Proprietăți pentru pictograme **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ăți pentru IconsProvider **children** `Element` *required* One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously. ## Înveliș pentru ilustrație `IllustrationIconWrapper` oferă stilizarea containerului pentru ilustrații și redirecționează atributele div native, elementele copil, stilurile și referințele. Fiecare export `IllustrationIcon*` este deja redat în interiorul acestuia, așadar folosește învelișul numai pentru a încadra propriul conținut de ilustrație. ```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. ## Pictogramă de încărcare animată `ThinkingOrbitLoaderIcon` se animează continuu cât timp este montată. Este decorativă și întotdeauna ascunsă de tehnologia de asistență. Afișează separat textul de încărcare și montează sau elimină pictograma în funcție de starea aplicației. **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. ## Catalog de pictograme denumite Acest catalog este generat din exporturile publice `twenty-ui/icon` și grupează pictogramele după proprietățile pe care le 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` * `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.