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

# Значок стека

> Значок размером 16 px с меньшим элементом, расположенным в правом нижнем углу.

## Обзор

Передайте основной значок через слот узла `icon`, а наложенный элемент — через `stackedIcon`. Контейнер имеет ширину и высоту 16 px; наложенный элемент абсолютно позиционируется на расстоянии 8 px слева и 7 px сверху, поэтому он выходит за пределы правого нижнего угла. Квадратный аватар размером 12 px — предполагаемый размер для логотипа приложения. Оба узла являются декоративными, поэтому рядом со значком должна быть видимая подпись.

Оставьте место для переполнения элемента в стопке при размещении соседнего содержимого. В примере используется отступ 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.