Avatar

A person or organisation shown as a picture or initials, alone or in a group.

CSS only components/avatar.css

Initials, icon, group

MNN AD

MNJK+3

<div class="dsgn-cluster">
  <span class="dsgn-avatar" role="img" aria-label="Martin Novák">MN</span><span class="dsgn-avatar" data-intent="accent" role="img" aria-label="Novama">N</span>
  <span class="dsgn-avatar" data-intent="success"><span class="dsgn-icon" aria-hidden="true">person</span></span><span class="dsgn-avatar" data-size="s" role="img" aria-label="Awesome Dogs">AD</span>
  <div class="dsgn-avatar-group"><span class="dsgn-avatar" data-intent="accent">MN</span><span class="dsgn-avatar" data-intent="warning">JK</span><span class="dsgn-avatar">+3</span></div>
</div>

Image

<div class="dsgn-cluster">
  <span class="dsgn-avatar"><img src="portrait.jpg" alt="Jana Kolářová"></span><span class="dsgn-avatar"><img src="portrait.jpg" alt="Petra Lišková"></span>
  <span class="dsgn-avatar" data-size="s"><img src="portrait.jpg" alt="Jana Kolářová"></span>
  <div class="dsgn-avatar-group"><span class="dsgn-avatar"><img src="portrait.jpg" alt="Jana Kolářová"></span><span class="dsgn-avatar"><img src="portrait.jpg" alt="Petra Lišková"></span><span class="dsgn-avatar" data-intent="accent">MN</span></div>
</div>

Usage

Default size = control height (Density), so an avatar lines up with buttons and inputs. data-size="s" = control line-height (for table cells, lists, inline text).

Corners follow radius-m like every other control: Sharp 0 · Default 4 · Rounded 8 · Pill = circle.

Group: <div class="dsgn-avatar-group"><span class="dsgn-avatar">…</span>…<span class="dsgn-avatar">+3</span></div>

Attributes

Attribute	Values and notes
`data-intent`	neutral (default) \| accent \| success \| warning \| danger — tint of initials/icon avatars.

Details

Classes: .dsgn-avatar .dsgn-icon .dsgn-avatar-group
Tokens used: --dsgn-accent-subtle --dsgn-accent-text --dsgn-border --dsgn-border-width --dsgn-control-font-size --dsgn-control-height --dsgn-control-line-height --dsgn-danger-subtle --dsgn-danger-text --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-neutral-subtle --dsgn-neutral-text --dsgn-radius-m --dsgn-space-2 --dsgn-success-subtle --dsgn-success-text --dsgn-surface-raised --dsgn-warning-subtle --dsgn-warning-text
In Figma: Avatar · Avatar group
Import alone: dsgn.systems/components/avatar.css