TintedIconTile

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.

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

string | null

default:"gray"

Theme palette name used to derive the background and icon shades. Invalid names use the default theme color.

IconComponent

required

Icon component rendered inside the tinted tile.

number

Icon and tile dimension in pixels. When omitted, the icon uses the medium theme size.

number

Icon stroke width. Defaults to the medium theme stroke.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props