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

# Icono de pila

> Un icono de 16 px con un elemento más pequeño apilado en su esquina inferior derecha.

## Resumen

Pase el icono principal mediante la ranura de nodo `icon` y el elemento apilado mediante `stackedIcon`. El contenedor mide 16 px de ancho y alto; el elemento apilado se coloca de forma absoluta a 8 px de la izquierda y 7 px de la parte superior, por lo que sobresale de la esquina inferior derecha. Un avatar cuadrado de 12 px es el tamaño previsto para un logotipo de aplicación. Ambos nodos son decorativos, así que mantenga una etiqueta visible junto al icono.

Deja espacio para el desbordamiento del elemento apilado al colocar contenido adyacente. El ejemplo utiliza un espacio de 12 px entre el contenedor del icono y su etiqueta.

**Light**

[Icono de empresa con un logotipo apilado (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-stackicon--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Icono de empresa con un logotipo apilado (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)

## Uso

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

Los atributos nativos, los eventos, `className`, `style` y `ref` se aplican al div externo. `render` reemplaza ese objetivo mediante la composición de Base UI y conserva ambos nodos de icono.

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