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

Pass an icon component through `Icon`. The tile derives its background and foreground shades from the theme palette. Keep a text label beside it; the tile is not an interactive control.

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

export const CompanyLabel = () => (
  <>
    <TintedIconTile Icon={IconBuildingSkyscraper} color="blue" />
    <Text>Companies</Text>
  </>
);
```

`size` sets both the icon and tile dimension in pixels. Without it, the tile uses its standard dimensions and the icon uses the medium theme size. `stroke` overrides the icon stroke width.

## Props

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

<ParamField body="Icon" type="IconComponent" required>
  Icon component rendered inside the tinted tile.
</ParamField>

<ParamField body="size" type="number">
  Icon and tile dimension in pixels. When omitted, the icon uses the medium theme size.
</ParamField>

<ParamField body="stroke" type="number">
  Icon stroke width. Defaults to the medium theme stroke.
</ParamField>