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

<x-wirekit::icon-tile icon="bell" />

Intents

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

<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

<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

<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:

<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

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