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

# StackIcon

> O pictogramă de 16 px cu un element mai mic suprapus în colțul din dreapta jos.

## Prezentare generală

Transmiteți pictograma principală prin slotul de nod `icon` și elementul suprapus prin `stackedIcon`. Containerul are 16 px lățime și înălțime; elementul suprapus este poziționat absolut la 8 px de la stânga și la 7 px de sus, astfel încât depășește colțul din dreapta jos. Un avatar pătrat de 12 px este dimensiunea prevăzută pentru sigla unei aplicații. Ambele noduri sunt decorative, așadar păstrați o etichetă vizibilă lângă pictogramă.

Lăsați spațiu pentru depășirea elementului stivuit atunci când poziționați conținutul adiacent. Exemplul utilizează un spațiu de 12 px între containerul pictogramei și eticheta sa.

**Light**

[Pictogramă de companie cu un logo stivuit (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-stackicon--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pictogramă de companie cu un logo stivuit (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)

## Utilizare

```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>
);
```

Atributele native, evenimentele, `className`, `style` și `ref` vizează div-ul exterior. `render` înlocuiește acea țintă prin compoziția Base UI, păstrând ambele noduri de pictogramă.

## Proprietăți

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