Avatar

User profile image or initials. One root class — avatar — with semantic colour and size modifiers.

Default Avatar

AB CD EF GH 
<span class="avatar">AB</span>
<span class="avatar primary">CD</span>
<span class="avatar success">EF</span>

Sizes

SM MD LG 
<span class="avatar small">SM</span>
<span class="avatar">MD</span>
<span class="avatar large">LG</span>

With Image

Alice Smith 
<span class="avatar large">
  <img src="avatar.jpg" alt="Alice Smith">
</span>

Avatar Group

Stack avatars using negative margin on a flex row:

AB CD EF +4 
<div>
  <span class="avatar primary">AB</span>
  <span class="avatar success" >CD</span>
  <span class="avatar"         >+4</span>
</div>

Variants

ClassUse
avatarDefault neutral — initials or fallback
avatar primaryBrand color background
avatar successOnline / active state
avatar secondarySecondary color background
avatar small32px — inline text, tables
avatar large48px — profile headers

Accessibility

  • Initials-only avatars need aria-label on the element
  • Image avatars need meaningful alt text on the <img>
  • Decorative avatars use alt="" to hide from screen readers

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Avatar component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.