---
title: Icon Tile
description: An icon in a square or a circle tinted in the color of its intent, the marker of a notice, a step or a figure, as decoration or as an image with a name.
visibility: guest
draft: false
---

# Icon Tile

An **icon tile** sets one icon in a square or a circle tinted in the color of its intent: the accent, a neutral gray or the color of a state. It marks the start of a notice, a step or a figure.

Without a `label` the tile is decoration and hidden from screen readers, which suits it beside a heading that says the same. With one it is an image with that name.

## Basic Usage

:::preview{title="An icon in a tile"}
<x-wirekit::icon-tile icon="bell" />
:::

## Intents

:::preview{title="Every intent"}
<x-wirekit::row gap="sm" wrap>
    <x-wirekit::icon-tile icon="bell" />
    <x-wirekit::icon-tile icon="clock" intent="neutral" />
    <x-wirekit::icon-tile icon="info" intent="info" />
    <x-wirekit::icon-tile icon="check" intent="success" />
    <x-wirekit::icon-tile icon="warning" intent="warning" />
    <x-wirekit::icon-tile icon="x-circle" intent="danger" />
</x-wirekit::row>
:::

`accent` is the default, and `primary` names it too, as it does on a [button](/components/button). Each tint is the color of the intent mixed into the page's background, with the icon in the matching text color, so a tile reads the same on a card and on the page.

## Sizes and Shapes

:::preview{title="Each size, square and circle"}
<x-wirekit::row gap="sm" align="center" wrap>
    <x-wirekit::icon-tile icon="lock" size="sm" />
    <x-wirekit::icon-tile icon="lock" />
    <x-wirekit::icon-tile icon="lock" size="lg" />
    <x-wirekit::icon-tile icon="lock" size="sm" shape="circle" />
    <x-wirekit::icon-tile icon="lock" shape="circle" />
    <x-wirekit::icon-tile icon="lock" size="lg" shape="circle" />
</x-wirekit::row>
:::

The sizes are the steps `sm`, `md` and `lg` of the kit's size ladder, and the icon grows with the tile. A square tile takes the corner radius of the same step.

## In a Notice

:::preview{title="A notice with its tile" fill}
<x-wirekit::card>
    <x-wirekit::card.body>
        <x-wirekit::row gap="md" align="start">
            <x-wirekit::icon-tile icon="shield-check" intent="warning" shape="circle" />
            <x-wirekit::stack gap="xs">
                <x-wirekit::text weight="semibold">Two-factor sign-in is off</x-wirekit::text>
                <x-wirekit::text size="sm" intent="muted">Turn it on before the end of the month to keep access to the payroll exports.</x-wirekit::text>
            </x-wirekit::stack>
        </x-wirekit::row>
    </x-wirekit::card.body>
</x-wirekit::card>
:::

The heading beside the tile says what the icon says, so the tile stays decoration.

## A Tile With a Name

:::preview{title="A named tile"}
<x-wirekit::row gap="sm" align="center">
    <x-wirekit::icon-tile icon="users" intent="info" label="Shared with your team" />
    <x-wirekit::text size="sm">Quarterly plan</x-wirekit::text>
</x-wirekit::row>
:::

Where nothing beside the tile says what it means, give it a `label`. The tile becomes one image with that name, and the icon inside it stays decoration.

## A Mark of Your Own

The slot takes a mark of your own in place of `icon`, such as a small SVG. It is drawn in the tile's text color through `currentColor`:

```blade
<x-wirekit::icon-tile intent="success" label="Verified">
    <svg viewBox="0 0 16 16" class="h-4 w-4" aria-hidden="true">
        <path d="M3 8l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" />
    </svg>
</x-wirekit::icon-tile>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | string\|null | `null` | The name of an [icon](/components/icon) of the active preset. The slot takes its place when it is given |
| `intent` | string | `'accent'` | `accent` (also `primary`), `neutral`, `info`, `success`, `warning`, `danger` |
| `size` | string | `'md'` | `sm`, `md`, `lg` |
| `shape` | string | `'square'` | `square`, `circle` |
| `label` | string\|null | `null` | What the icon says. Given, the tile is an image with that name; left out, it is hidden from assistive technology |
| `scope` | string\|null | `null` | Scoped personalization name |

## Accessibility

- **Without a `label` the tile carries `aria-hidden="true"`.** That is right beside a heading, a sentence or a button that says the same: the icon repeats it, and a screen reader would read it twice.
- **With a `label` the tile is `role="img"` with the label as its name**, and the icon inside it stays hidden, so the tile is read once, as one image. A label given as markup is read as its text.
- **A caller's own `aria-label` or `aria-hidden` wins** over both, so a tile that a nearby element names through `aria-labelledby` keeps that name.
- The icon takes the text color of its intent, the tone the kit uses for text on a tinted surface.

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-accent`, `--color-wk-info-tone`, `--color-wk-success`, `--color-wk-warning`, `--color-wk-danger` | The tint, mixed into `--color-wk-bg` |
| `--color-wk-accent-text`, `--color-wk-info-text`, `--color-wk-success-text`, `--color-wk-warning-text`, `--color-wk-danger-text` | The icon's color |
| `--color-wk-bg-muted`, `--color-wk-text` | The `neutral` tile |
| `--size-wk-sm`, `--size-wk-md`, `--size-wk-lg` | The tile's width and height |
| `--radius-wk-sm`, `--radius-wk-md`, `--radius-wk-lg` | The corners of a square tile |