# IconTile

> An icon in a tinted square, so a row is recognized before it is read: a category, an account, a status. Colors are the eight palette steps, the brand and the four statuses, each a pair the contrast test measures. It is decorative unless you name it. A badge in the corner, cut out of the surface, can carry what is behind it, such as a bank.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/icon-tile

## Install

```bash
npx @entrepta/cli@latest add icon-tile
```

Files: `primitives/icon-tile.tsx`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `icon-lib`.

## Usage

```tsx
import { IconTile } from "@/components/entrepta/icon-tile"
import { ForkKnifeIcon } from "@phosphor-icons/react"

<IconTile icon={ForkKnifeIcon} color="chart-3" />
<IconTile icon={ForkKnifeIcon} color="brand" size="lg" />
<IconTile icon={WalletIcon} badge={<Avatar name="Bank" size="sm" />} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `Icon \| ReactElement` | - | A Phosphor icon, or an element from a server file |
| `color` | `"neutral" \| "brand" \| "chart-1" … "chart-8" \| "success" \| "warning" \| "error" \| "info"` | "neutral" | Store the key, never a hex, so the color follows every theme |
| `size` | `"sm" \| "md" \| "lg"` | "md" | 24, 32 or 40px |
| `badge` | `ReactNode` | - | Something small in the corner, cut out of --cutout |