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

> A 16px icon with a smaller item stacked on its bottom-right corner.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

Pass the main icon through the `icon` node slot and the stacked item through `stackedIcon`. The container is 16px wide and tall; the stacked item is positioned absolutely at 8px from the left and 7px from the top so it overflows the bottom-right corner. A 12px square avatar is the intended size for an application logo. Both nodes are decorative, so keep a visible label beside the icon.

Leave room for the stacked item's overflow when placing neighboring content. The example uses a 12px gap between the icon container and its label.

<StoryEmbed storyId="ui-components-data-display-stackicon--display" title="Company icon with a stacked logo" height={100} />

## Usage

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

Native attributes, events, `className`, `style`, and `ref` target the outer div. `render` replaces that target through Base UI composition while preserving both icon nodes.

## Props

<ParamField body="className" type="string">
  CSS class applied to the container root.
</ParamField>

<ParamField body="icon" type="ReactNode" required>
  Main icon content. The caller controls its dimensions and stroke.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Replaces the div root while preserving the icon content and native props.
</ParamField>

<ParamField body="stackedIcon" type="ReactNode" required>
  Smaller content stacked on the bottom-right corner of the main icon, such as a 12px avatar.
</ParamField>

<ParamField body="style" type="CSSProperties">
  Inline styles applied to the container root.
</ParamField>


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