Icon tile
A small surface that frames a glyph or a letter: an integration, a file type, a settings group, an empty state. Three axes: size, shape and tone. Source: src/components/ui/icon-tile.tsx.
Sizes
Four sizes, set by where they live: xs beside an author name, sm in a composer or a menu row, lg on a settings card, xl in an empty state. The ladder skips 32–40px; there is no md yet.
Shapes
rounded is the default. soft matches the card corners; circle pairs with avatars.
Tones
tint is the quiet default. raised lifts the tile onto the canvas with a hairline, for third-party glyphs. brand is for the one tile on a screen that earns the accent.
Letter
At xs the tile sets a 10px medium letter, so it can stand in for an author with no picture. Larger sizes do not set a letter style; bring your own.
In a list
The common composition: a raised tile leading a name and a line of detail.
GitHub
Pull requests and reviews
Calendar
Meetings and free time
Postgres
Read-only warehouse access
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "lg" | "xl" | "sm" | 20, 24, 48 or 64px. There is no 32/36/40px step. Mirrored as data-size. |
| shape | "rounded" | "soft" | "circle" | "rounded" | 8px corners, 14px corners, or round. |
| tone | "tint" | "raised" | "brand" | "tint" | The fill. Mirrored as data-tone. |
| ...props | ComponentProps<"div"> | — | Native attributes pass through; className merges last. The child glyph keeps the size you give it. |
Best practices
When to use
- A thing, not a person: an app, a file type, a feature, a settings group. People get an Avatar.
- Not a button. If the tile is clickable, wrap the whole row in a Button or a link and keep the tile decorative.
Behavior
- The tile never sizes the icon. Rough guide: 12px at xs, 14px at sm, 20–24px at lg, 32px at xl.
- No md step: a 32–40px tile means a one-off size-* override for now. Prefer lg or sm until the scale grows.
- xs uses an arbitrary text-[10px] for its letter; it is a known exception to the type scale.
Accessibility
- The tile is a div with no role. The glyph inside takes aria-hidden; the name next to it is the label.
- If a tile stands alone and means something, give the div role="img" and an aria-label.
Content
- One Tabler glyph or a single uppercase letter. No text labels, no badges stacked on top.
- Third-party marks go on raised so their own colours sit on a neutral surface. Don't use the product logo as a tile.