StackIcon

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.

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 = () => (
  <>
    <StackIcon
      icon={<IconBuildingSkyscraper size={16} />}
      stackedIcon={
        <Avatar size="xs" shape="square" variant="outline" name="Stripe" />
      }
    />
    <Text>Companies</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

string

CSS class applied to the container root.

ReactNode

required

Main icon content. The caller controls its dimensions and stroke.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Replaces the div root while preserving the icon content and native props.

ReactNode

required

Smaller content stacked on the bottom-right corner of the main icon, such as a 12px avatar.

CSSProperties

Inline styles applied to the container root.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props