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

# TintedIconTile

> An icon on a tinted background derived from a theme color.

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 icon content through the lowercase `icon` node slot. The tile derives its background and inherited foreground color from the theme palette. Icon content is decorative. Keep a visible label beside it, or give the root `role="img"` and an accessible name for a standalone labeled image.

<StoryEmbed storyId="ui-components-data-display-tintedicontile--display" title="Company icon on a tinted tile" height={100} />

## Usage

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';
import { IconBuildingSkyscraper } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const CompanyLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <TintedIconTile icon={<IconBuildingSkyscraper size={16} />} color="blue" />
    <Text>Companies</Text>
  </Text>
);
```

## Geometry and native composition

The tile defaults to 16px through the spacing token and uses the small border-radius token. Set icon dimensions and stroke on the node itself. Root `style` or `className` controls tile width, height, border, shape, and colors; explicit styles override palette defaults. Custom artwork should inherit `currentColor` when it uses the palette foreground.

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';

export const CustomCompanyTile = () => (
  <TintedIconTile
    icon={
      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M2 2h16v16H2z" />
      </svg>
    }
    color="blue"
    role="img"
    aria-label="Companies"
    render={<span />}
    style={{ width: 32, height: 32 }}
  />
);
```

Native attributes, events, `className`, `style`, and `ref` target the outer div. `render` replaces that target through Base UI composition while preserving the decorative icon content. Name the surrounding control when composing a tile into an action.

Replace `Icon={CompanyIcon}` with `icon={<CompanyIcon size={16} />}`. Move the former `size` and `stroke` options to the icon node, and use root styles for custom tile dimensions.

## Props

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

<ParamField body="color" type="string | null" default="gray">
  Theme palette name used to derive the background and foreground shades. Invalid names use the default theme color.
</ParamField>

<ParamField body="icon" type="ReactNode" required>
  Decorative 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 icon content and native props.
</ParamField>

<ParamField body="style" type="CSSProperties">
  Inline styles override tile geometry and palette defaults.
</ParamField>


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