Avatar
An image element with a fallback for representing the user.
Last updated: March 11, 2026
This page now includes avatar patterns for status badges, team presence, editable profiles, grouped members, and richer account cards.
Default Avatar
The base avatar with image and fallback.
Fallback Only Avatar
Displays initials without relying on an image source.
Sizes Avatar
Shows avatar sizing from compact to extra large.
Rounded Square Avatar
Compares different corner radius treatments.
Verified Avatar
Adds a verification badge to the base avatar.
Status Dot Avatar
Presence indicators for online, away, offline, and busy states.
Pro Badge Avatar
Premium member presentation with crown badge.
Admin Badge Avatar
Administrative state with shield icon treatment.
Notification Badge Avatar
Avatar with a compact numeric badge.
Editable Avatar
Profile image pattern with camera affordance and hover overlay.
Group Avatar
Stacked member avatars with overflow count.
With Name Avatar
Simple identity row with name and email.
Alex Johnson
alex@example.com
With Name Role Avatar
Compact user card with role metadata and status.
Sam Lee
Product Designer
Colored Fallbacks Avatar
Fallback-only avatars with color-coded initials.
Emoji Fallback Avatar
Uses emoji placeholders for playful identity states.
Ring Avatar
Highlights selected or active profiles with outer rings.
Connection Status Avatar
Network state badges for connected and offline members.
Add Member Avatar
Member group pattern with an inline add action.
Team List Avatar
List-style team roster with role and presence state.
Alex Johnson
Engineering
Sara Malik
Design
Kevin Torres
Product
Notification Bell Avatar
Avatar card with a notification bell badge.
BilalUI
3 new notifications