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

# Riquadro icona colorato

> Un'icona su uno sfondo colorato derivato da un colore del tema.

## Panoramica

Passa il contenuto dell'icona tramite lo slot del nodo `icon` in minuscolo. Il riquadro deriva lo sfondo e il colore di primo piano ereditato dalla tavolozza del tema. Il contenuto dell'icona è decorativo. Mantieni un'etichetta visibile accanto a essa oppure assegna alla radice `role="img"` e un nome accessibile per un'immagine etichettata autonoma.

**Light**

[Icona dell'azienda su un riquadro colorato (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Icona dell'azienda su un riquadro colorato (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)

## Utilizzo

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

## Geometria e composizione native

Il riquadro è impostato per impostazione predefinita a 16px tramite il token di spaziatura e utilizza il token piccolo per border-radius. Imposta le dimensioni e il tratto dell'icona sul nodo stesso. `style` o `className` dell'elemento radice controllano larghezza, altezza, bordo, forma e colori del riquadro; gli stili espliciti sovrascrivono i valori predefiniti della tavolozza. La grafica personalizzata deve ereditare `currentColor` quando utilizza il colore di primo piano della tavolozza.

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

Gli attributi nativi, gli eventi, `className`, `style` e `ref` si applicano al div esterno. `render` sostituisce tale destinazione tramite la composizione Base UI, mantenendo il contenuto decorativo dell'icona. Assegna un nome al controllo circostante quando componi un riquadro in un'azione.

Sostituisci `Icon={CompanyIcon}` con `icon={<CompanyIcon size={16} />}`. Sposta le precedenti opzioni `size` e `stroke` nel nodo dell'icona e utilizza gli stili dell'elemento radice per dimensioni personalizzate del riquadro.

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