Initials
Display user initials as a text-based avatar
AB
<div class="nds-avatar nds-lg">
<span class="nds-label">AB</span>
</div>
Icon
Use an icon as the avatar content for generic user placeholders
<div class="nds-avatar nds-lg">
<i class="nds-icon nds-icon-avatar" aria-hidden="true"></i>
</div>
Image
Display a user photo with optional image border
<div class="nds-avatar nds-lg">
<img src="path/to/avatar.jpg" alt="User Avatar">
</div>
Group
Stack multiple avatars together with overlapping or spaced layouts
+99
Built-in Features
Pure CSS
No JavaScript required. Renders immediately from HTML markup.
Seven Sizes
From 24px (XS) to 120px (3XL). Font and icon scale proportionally.
Element Agnostic
Works on div, a, or button elements for display, navigation, or actions.
Group Layout
Stack avatars with overlapping or spaced arrangement and overflow count.
Usage Guidelines
When to Use
- Use initials when no profile image is available. Two letters from the user's name
- Use icon avatars for anonymous or system-level users where no identity is needed
- Use image avatars when a real photo is available. Always include alt text
- Use groups to show participants, collaborators, or team members in a compact space
- Choose the size based on context: XS/SM for inline mentions, MD/LG for cards, XL+ for profile headers