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

# Mosaico de icono tintado

> Un icono sobre un fondo teñido derivado de un color del tema.

## Resumen

Pasa el contenido del icono mediante el slot de nodo `icon` en minúsculas. El mosaico obtiene el color de fondo y el color de primer plano heredado de la paleta del tema. El contenido del icono es decorativo. Mantén una etiqueta visible junto a él o asigna a la raíz `role="img"` y un nombre accesible para una imagen etiquetada independiente.

**Light**

[Icono de empresa en un mosaico tintado (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Icono de empresa en un mosaico tintado (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-tintedicontile--display)

## "Uso"

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

## Geometría y composición nativa

El mosaico usa de forma predeterminada 16px mediante el token de espaciado y utiliza el token pequeño de radio de borde. Establece las dimensiones y el trazo del icono en el propio nodo. `style` o `className` de la raíz controla el ancho, la altura, el borde, la forma y los colores del mosaico; los estilos explícitos anulan los valores predeterminados de la paleta. Las ilustraciones personalizadas deben heredar `currentColor` cuando utilizan el color de primer plano de la paleta.

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

Los atributos nativos, los eventos, `className`, `style` y `ref` se aplican al div exterior. `render` reemplaza ese destino mediante la composición de Base UI y conserva el contenido decorativo del icono. Asigna un nombre al control circundante al componer un mosaico en una acción.

Reemplaza `Icon={CompanyIcon}` por `icon={<CompanyIcon size={16} />}`. Mueve las opciones anteriores `size` y `stroke` al nodo de icono y utiliza estilos de raíz para dimensiones personalizadas del mosaico.

## "Props"

**className** `string`

CSS class applied to the tile root.

**color** `string | null` (default: gray)

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

**icon** `ReactNode` *required*

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

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

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

**style** `CSSProperties`

Inline styles override tile geometry and palette defaults.


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