Avatar

People and teams as compact, stackable identity marks.

v1.0.0·Updated Jul 8, 2026 · 10:45

◇ Open the Figma file ↗✳ Start building with Claude ↗

Live Demo — Fully Interactive

A photo, cover-fit and clipped — five sizes

Rounded-square variant

Configuration

Content

Size

Shape

Status

<Avatar initials="AL" size="lg" status="online" />

Behavior — The Engineering Contract

Prop	Type	Notes
src / name	string	Photo, then initials from name, then icon
size	xs · sm · md · lg · xl	24 / 32 / 40 / 56 / 76px
shape	circle · square	Circle by default; square for brands
status	online · idle · busy	Presence dot with a page-colour ring
max (group)	number	Visible avatars before a +N tile

An Avatar identifies a person or team. For a status dot alone use an Indicator; for a brand mark use the Logo.

Anatomy

1ContentImage, initials or icon — in that order.

2ContainerCircle (or rounded square), clips the content.

3StatusOptional presence dot with a page ring.

Do's and Don'ts

✓ Do

Use one or two initials from the name when there is no photo.

✕ Don't

ADA L.

Don't cram a full name in. Two characters, sized to read.

✓ Do

ATGH+3

Cap a group with a +N so the row never sprawls.

✕ Don't

ALATGHKJMRPT

Don't line up a dozen full avatars. Overlap and cap them.

In context: Examples

A · List row

ALAda Lovelace

Leading a list or table row, size SM or MD.

B · Profile header

Large XL avatar with presence on a profile page.

C · Assignees

GHKJ+2

Stacked assignees on a task or project card.

Measurements & Tokens

Token	Value	Role
--av-xs … xl	24 / 32 / 40 / 56 / 76px	The five sizes
--av-radius	50% · 20%	Circle or rounded square
--av-base	#26262B	Neutral fallback fill
--av-warm	#FF7A00 @18%	Tinted initials, one of four hues
--av-ring	2px page bg	Group overlap and status ring
--av-overlap	-11px	Group stacking offset

Code

<span class="o-avatar o-avatar--md">
  <img class="o-avatar__img" src="/ada.jpg" alt="Ada Lovelace" />
</span>

<span class="o-avatar o-avatar--md o-avatar--warm">AL</span>   <!-- initials -->
<span class="o-avatar o-avatar--md"><UserIcon /></span>         <!-- fallback -->

<span class="o-avatar-anchor">
  <span class="o-avatar o-avatar--lg">AL</span>
  <span class="o-ind o-ind--online o-ind--ring"></span>
</span>

Related Components

TableA theme-aware data grid: sort, filter, search, select, edit, expand, paginate, pin, resize and more.● documented ChartBar, line, area, donut and sparkline. Pure SVG, token-coloured, theme-aware, no dependencies.● documented ListVertical collections with leading and trailing slots.● documented