> ## 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. # الأيقونات > الأيقونات المُسمّاة، والبحث الديناميكي، وأغلفة الرسوم التوضيحية، والخصائص المدعومة لها. ## نظرة عامة استورِد الأيقونات المُسمّاة من `twenty-ui/icon`. استخدم عنصر التحكم المحيط أو النص المرئي لإيصال المعنى. يجب إخفاء الأيقونات الزخرفية عن التقنيات المساعدة. ```tsx theme={null} import { IconCheck } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const CompleteButton = () => ( ); ``` تُحدِّد فتحات أيقونات الأزرار حجم أيقونتها وتخفيها عن التقنيات المساعدة بالفعل، لذا لا تحتاج الأيقونة إلى خصائص إضافية هناك. ## الخصائص المدعومة تقبل أيقونات Tabler كلاً من `size` (رقم أو طول CSS)، و`stroke` (عرض الحد)، و`color`، وسمات ومراجع SVG الأصلية. لا تقبل أيقونات العلامة التجارية والرسوم التوضيحية المخصصة إلا الخصائص المدرجة في الكتالوج المُنشأ أدناه. تختلف أحجامها الافتراضية؛ مرِّر `size` للحصول على نتيجة متسقة. قد تكون ألوان العلامة التجارية ثابتة في العمل الفني، لذا لا يتوفر تجاوز اللون إلا حيثما يكون مُدرجاً. تحتاج الأيقونات المخصصة التي لا تقبل سمات إمكانية الوصول إلى غلاف يحمل التسمية المناسبة أو `aria-hidden`. يتوفر `className` و`style` أيضاً فقط حيثما يكونان مُدرجين. استورِد أيقونة محددة عندما يكون ذلك ممكناً لتجنب تحميل الكتالوج الديناميكي. تحافظ الأيقونات المُصدَّرة على عرضها المطلوب في تخطيطات flex، بما في ذلك داخل الأزرار. اسمح للنص المجاور بالاقتطاع أو اسمح للعنصر الأب بالالتفاف أو التمرير عند محدودية المساحة. عندما تدعم أيقونة `className` أو `style`، يمكنك تجاوز `flex-shrink` صراحةً لتخطيط يحتاج إليه. تحافظ حاويات الرسوم التوضيحية أيضًا على عرضها. ## أسماء الأيقونات الديناميكية استخدم `IconsProvider` و`Icon` عندما تُختار الأسماء في وقت التشغيل. يحمّل الموفّر خريطة الأيقونات الكاملة بشكل غير متزامن؛ تتضمن الحزم المُنشأة بدون تقسيم الشفرة، مثل المكونات الأمامية، الخريطة كاملةً. قبل اكتمال التحميل، وللأسماء غير المعروفة، يعرض `Icon` الرمز `Icon123`. تختلف الخريطة الديناميكية عن كتالوج التصدير المُسمّى؛ لا تفترض أنه يمكن حل كل تصدير لعلامة تجارية أو رسم توضيحي بالاسم. ```tsx theme={null} import { Icon, IconsProvider } from 'twenty-ui/icon'; import { Button } from 'twenty-ui/primitives/input'; export const DynamicAction = ({ iconName }: { iconName: string }) => ( ); ``` يكشف `useIcons()` عن `getIcon(name, customDefaultIcon)` و`getIcons()` داخل الموفّر نفسه. تُرجع `getIcons()` في البداية خريطة فارغة. تستخدم `getIcon` البديل المُسمّى عند وجوده، ثم `Icon123`. يقبل الموفّر عنصراً تابعاً واحداً؛ استخدم جزءاً لعدة عناصر تابعة. ### خصائص 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. ### خصائص IconsProvider **children** `Element` *required* One React element containing consumers of Icon or useIcons. Loads the complete icon map asynchronously. ## غلاف الرسم التوضيحي يوفر `IllustrationIconWrapper` تنسيق حاوية الرسم التوضيحي ويمرر سمات div الأصلية والعناصر التابعة والأنماط والمراجع. يُعرَض كل تصدير من `IllustrationIcon*` داخله بالفعل، لذا استخدم الغلاف فقط لتأطير محتوى الرسم التوضيحي الخاص بك. ```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. ## أيقونة تحميل متحركة تتحرك `ThinkingOrbitLoaderIcon` باستمرار أثناء تركيبها. إنها زخرفية ومخفية دائماً عن التقنيات المساعدة. اعرض نص التحميل بشكل منفصل، وركّب الأيقونة أو أزلها وفقاً لحالة التطبيق. **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. ## كتالوج الأيقونات المُسمّاة يُنشأ هذا الكتالوج من عمليات التصدير العامة لـ `twenty-ui/icon` ويجمع الأيقونات حسب الخصائص التي تقبلها. ### 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.