> ## 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.

# أيقونة التكديس

> أيقونة بحجم 16px مع عنصر أصغر مكدس في زاويتها السفلية اليمنى.

## نظرة عامة

مرر الأيقونة الرئيسية عبر فتحة العقدة `icon` والعنصر المكدس عبر `stackedIcon`. يبلغ عرض الحاوية وارتفاعها 16px؛ ويوضع العنصر المكدس بوضع مطلق على مسافة 8px من اليسار و7px من الأعلى، بحيث يتجاوز الزاوية السفلية اليمنى. الصورة الرمزية المربعة بحجم 12px هي الحجم المقصود لشعار التطبيق. كلتا العقدتين للزينة، لذا أبقِ تسمية مرئية بجانب الأيقونة.

اترك مساحة لتجاوز العنصر المكدس عند وضع المحتوى المجاور. يستخدم المثال فجوة بمقدار 12px بين حاوية الأيقونة وتسميتها.

**Light**

[أيقونة الشركة مع شعار مكدس (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-stackicon--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أيقونة الشركة مع شعار مكدس (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-stackicon--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-stackicon--display)

## استخدام

```tsx theme={null}
import { StackIcon } from 'twenty-ui/components/data-display';
import { IconBuildingSkyscraper } from 'twenty-ui/icon';
import { Avatar } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const CompanyFieldLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <StackIcon
      icon={<IconBuildingSkyscraper size={16} />}
      stackedIcon={
        <Avatar size="xs" shape="square" variant="outline" name="Stripe" />
      }
    />
    <Text>Companies</Text>
  </Text>
);
```

تستهدف السمات والأحداث الأصلية و`className` و`style` و`ref` عنصر div الخارجي. يستبدل `render` ذلك الهدف عبر تركيب Base UI مع الحفاظ على عقدتي الأيقونة كلتيهما.

## الخصائص

**className** `string`

CSS class applied to the container root.

**icon** `ReactNode` *required*

Main icon content. The caller controls its dimensions and stroke.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the div root while preserving the icon content and native props.

**stackedIcon** `ReactNode` *required*

Smaller content stacked on the bottom-right corner of the main icon, such as a 12px avatar.

**style** `CSSProperties`

Inline styles applied to the container root.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.