Avatar

Sqrl custom

Initials or image in avatar + text-bg-*. Sizes and patterns below; usage → Rules.

Sizes

avatar-xs, avatar-sm, default avatar, avatar-lg, avatar-xl (16 / 24 / 32 / 44 / 56px). avatar-xs in compact lists and meta rows; avatar-xl on profile headers and empty states.

MDMDMDMDMD

<span class="avatar avatar-xs text-bg-info">MD</span>
<span class="avatar avatar-sm text-bg-info">MD</span>
<span class="avatar text-bg-info">MD</span>
<span class="avatar avatar-lg text-bg-info">MD</span>
<span class="avatar avatar-xl text-bg-info">MD</span>

Tones

Status: same text-bg-* tokens as badges — Tones.

WNDTLSMDOP

<span class="avatar text-bg-success">WN</span>
<span class="avatar text-bg-warning">DT</span>
<span class="avatar text-bg-danger">LS</span>
<span class="avatar text-bg-info">MD</span>
<span class="avatar text-bg-neutral">OP</span>

Accents

Sqrl custom

Decorative only: text-bg-accent-* — see Colors — Accents.

TLTCSLTPVL

<span class="avatar text-bg-accent-teal">TL</span>
<span class="avatar text-bg-accent-terracotta">TC</span>
<span class="avatar text-bg-accent-slate">SL</span>
<span class="avatar text-bg-accent-taupe">TP</span>
<span class="avatar text-bg-accent-violet">VL</span>

Shape

Circle (default): people. avatar-square: organisations (default 10px corners; avatar-sm 8px, avatar-xs 4px).

DTSK

<span class="avatar text-bg-warning">DT</span>
<span class="avatar avatar-square text-bg-light">SK</span>

Group

avatar-group: overlapping stack; show at most two faces + +N on text-bg-light.

MLDT+4

<div class="avatar-group">
  <span class="avatar text-bg-info">ML</span>
  <span class="avatar text-bg-warning">DT</span>
  <span class="avatar text-bg-light">+4</span>
</div>

Rules

Shape and tone

• Do not mix circle and square in one row without a label explaining the difference.
• Initials without src: always a text-bg-* tint (hash or semantic).

Group

avatar-group summarizes assignees — not a full roster; link out for detail.

Popover

Avatar may trigger a popover for a person summary.