'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
IconTile
An icon in a tinted square: the face of a feature card, a collection or an integration, or an app's mark next to its name.
import { IconTile } from '@alea/ui';
Examples
Tones and sizes
soft for features, solid for a brand mark; gradient for a logo; xs sits beside a name in a menu, sm in a navbar, lg leads a card.
Feature cards
The tile is decorative: the title next to it says what it is.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-on…--alea-accent-strong…--alea-gradient-accent…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-text…
Radius
--alea-radius-md…--alea-radius-sm…
Props
IconTile props
An icon in a tinted square: the face of a feature card, a collection, an integration, or an app's mark.
| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | ReactNode | - | The icon (a Lucide icon or any 24 px SVG). Decorative: say what it means in the text next to it. |
className | string | - | Extra class names for the root element. |
shape | "square" | "circle" | 'square' | Square with rounded corners (default) or a circle. |
size | "sm" | "md" | "lg" | "xs" | 'md' | xs (20 px, beside a name in a menu), sm (28 px, a logo in a navbar), md (40 px, default) or lg (48 px). |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | 'accent' | The color. Default accent. |
variant | "soft" | "solid" | "gradient" | 'soft' | soft (a tinted square, default), solid (filled, for a brand mark) or gradient (the accent gradient, for a product's logo mark). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
shapesquarecirclesizesmmdlgxstonedangerneutralaccentsuccesswarninginfovariantsoftsolidgradient- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-icon-tile- Data attributes
data-size=xsdata-size=smdata-size=lgdata-shape=circledata-tone=neutraldata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-variant=soliddata-tone=accentdata-variant=gradient
Accessibility
- Decorative: hidden from screen readers. Say what it means in the text next to it.
- Tones keep 3:1 against their tint in every look.
Do and don't
Do
- Use solid for a brand mark and soft for features.
- Keep one tone per list unless the tone means something.
Don't
- Don't make it the only way to tell items apart.
- Don't make it a button: use IconButton.
In Figma
Icon tile with Tone, Variant (soft, solid), Size (sm, md, lg) and Shape.