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

# Icona stack

> Un'icona di 16 px con un elemento più piccolo sovrapposto nell'angolo inferiore destro.

## Panoramica

Passa l'icona principale tramite lo slot del nodo `icon` e l'elemento sovrapposto tramite `stackedIcon`. Il contenitore è largo e alto 16 px; l'elemento sovrapposto è posizionato in modo assoluto a 8 px da sinistra e 7 px dall'alto, quindi fuoriesce dall'angolo inferiore destro. Un avatar quadrato di 12 px è la dimensione prevista per il logo di un'applicazione. Entrambi i nodi sono decorativi, quindi mantieni un'etichetta visibile accanto all'icona.

Lascia spazio per la fuoriuscita dell'elemento sovrapposto quando posizioni i contenuti adiacenti. L'esempio utilizza uno spazio di 12 px tra il contenitore dell'icona e la relativa etichetta.

**Light**

[Icona aziendale con un logo sovrapposto (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-stackicon--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Icona aziendale con un logo sovrapposto (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)

## Utilizzo

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

Gli attributi nativi, gli eventi, `className`, `style` e `ref` si applicano al div esterno. `render` sostituisce tale destinazione tramite la composizione di Base UI, preservando entrambi i nodi delle icone.

## Props

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