Avatars — Monarch Design System

Sizes

Avatar Sizes

JY

HTML

<div class="monarch-avatar monarch-avatar-sm monarch-avatar-brand">JY</div>
<div class="monarch-avatar monarch-avatar-md monarch-avatar-brand">JY</div>
<div class="monarch-avatar monarch-avatar-lg monarch-avatar-brand">JY</div>
<div class="monarch-avatar monarch-avatar-xl monarch-avatar-brand">JY</div>

Color Variants

Different Users

JY

EM

KM

SD

AR

TK

HTML

<div class="monarch-avatar monarch-avatar-md monarch-avatar-brand">JY</div>
<div class="monarch-avatar monarch-avatar-md monarch-avatar-blue">EM</div>
<div class="monarch-avatar monarch-avatar-md monarch-avatar-green">KM</div>

With Status

Status Indicator

JY

EM

KM

TK

HTML

<div class="monarch-avatar monarch-avatar-md monarch-avatar-brand">
  JY
  <span class="monarch-avatar__status monarch-avatar__status--online"></span>
</div>

Avatar Group

Stacked Avatars

JY

EM

KM

SD

+3

HTML

<div class="monarch-avatar-group">
  <div class="monarch-avatar monarch-avatar-sm monarch-avatar-brand">JY</div>
  <div class="monarch-avatar monarch-avatar-sm monarch-avatar-blue">EM</div>
  <div class="monarch-avatar monarch-avatar-sm monarch-avatar-group__overflow">+3</div>
</div>

Agent Avatar

AI Agent Avatars

HTML

<div class="monarch-avatar monarch-avatar-md monarch-avatar-agent">
  <svg>🤖</svg>
</div>

Usage Guidelines

• Humans get round avatars. AI agents get rounded-square avatars

• Use brand gradient for the primary/current user, solid colors for others

• Status dots: green = online, amber = away, gray = offline, red pulse = alert

• In groups, cap visible avatars at 4-5 with a "+N" overflow