Components · Text & content

Icon tile

An icon set in a tinted, rounded tile — the visual lead for an empty state, a feature row, or a menu entry. It defaults to the Primary tint, with a colour set spanning the palette and semantic roles. Three sizes: 32 / 40 / 56px.

Preview

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI

Apply the Zetta "Icon tile" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `icon-tile` spec (variants: primary, brand, info, ai, success, warning, danger, neutral) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `icon-tile` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

╭──────╮
│  ★   │  ← icon-tile-md (40×40px, primary-bg, primary icon)
╰──────╯

State	Visual
Default	Icon in rounded container, semantic fill
Interactive hover	`{colors.surface-muted}` overlay on container
Interactive focus	`2px solid {colors.border-focus}` outline

When to use

Feature or module identifier in a card header or list row.
Empty state illustration (use lg with a descriptive heading).
App or integration shortcut in a grid.

When not to use

As an interactive button — use Icon Button.
When the icon is the sole communicator of status — pair with a text label.

Do

Match color variant to the semantic meaning (danger for error states, success for completion).
Use lg for empty states, md for card headers, sm for dense list rows.

Don't

Don't stack icon tiles without a label — provide adjacent text describing the feature.

Icon tile carries no text — the adjacent label provides context. Never use icon tile as the sole description of an entity.
For empty state use: choose an icon that metaphorically represents the absent content (e.g. table_chart for missing table data, cloud_off for connectivity errors).
Match color variant to semantic meaning — danger for error tiles, success for completion tiles, neutral for inactive or unavailable entities.

Keyboard

Icon Tile is decorative by default and has no keyboard behavior. When used as an interactive element, wrap it in a <button> — keyboard behavior then follows the standard button spec.

Accessibility

Icon tile is always decorative — add aria-hidden="true" on the tile container.
The adjacent text label carries the accessible meaning.

Spec

Values and token references resolved straight from the Zetta spec.

icon-tile-sm

width: 32px
height: 32px
borderRadius: {rounded.base}
backgroundColor: {colors.primary-bg}
iconSize: {icons.sizeMap.md}
iconColor: {colors.primary}
display: flex
alignItems: center
justifyContent: center

icon-tile-md

width: 40px
height: 40px
borderRadius: {rounded.base}
backgroundColor: {colors.primary-bg}
iconSize: {icons.sizeMap.lg}
iconColor: {colors.primary}
display: flex
alignItems: center
justifyContent: center

icon-tile-lg

width: 56px
height: 56px
borderRadius: {rounded.base}
backgroundColor: {colors.primary-bg}
iconSize: {icons.sizeMap.xl}
iconColor: {colors.primary}
display: flex
alignItems: center
justifyContent: center

icon-tile-brand

backgroundColor: {colors.brand-bg}
iconColor: {colors.brand}

icon-tile-info

backgroundColor: {colors.info-bg}
iconColor: {colors.info}

icon-tile-ai

backgroundColor: {colors.ai-bg}
iconColor: {colors.ai}

icon-tile-success

backgroundColor: {colors.success-bg}
iconColor: {colors.success}

icon-tile-warning

backgroundColor: {colors.warning-bg}
iconColor: {colors.warning}

icon-tile-danger

backgroundColor: {colors.danger-bg}
iconColor: {colors.danger}

icon-tile-neutral

backgroundColor: {colors.surface-muted}
iconColor: {colors.muted}

Known gaps

Interactive icon tile (clickable tile as a navigation shortcut) — hover/focus/active states not yet specified. Use button-icon as a fallback.
Custom icon tile shape (circle, full-radius pill) — only {rounded.base} is currently defined.