Avatar

A compact identity marker. Shows an image when one loads; otherwise falls back to initials derived from the name. The background is a deterministic, token-driven hue rotation of the theme accent — the same name always gets the same tint, and it adapts to light/dark automatically. Three sizes, circle or square.

Initials fallback

Each name maps to a stable tint bucket via an oklch hue rotation.

Sizes

Shape

With image

A valid image renders the photo. A broken URL falls back to initials.

Single-token & custom initials

Group — overlapping stack with overflow

Cap with max; the remainder collapses into a +N chip.