Avatar
User avatar component for displaying profile pictures with automatic fallback to initials or icons. Supports multiple sizes and handles image loading states gracefully.
Live Preview
Basic
Simple Avatar with Image
Basic avatar displaying a user profile picture
Multiple Avatars
Display multiple user avatars in a row
Sizes
Avatar Sizes
Available size variants from extra small to 2x large
Fallbacks
Fallback with Initials
Display user initials when no image is available
Auto-generated Fallback
Uses first letter of alt text when no fallback is provided
Default Fallback
Shows question mark when no alt or fallback is provided
Icon Fallback
Use an icon component as fallback
Multiple Icon Fallbacks
Different icons for different use cases
Error Handling
Invalid Image URL
Falls back to initials when image fails to load
Broken Domain
Handles network errors gracefully
No Image Source
Using Avatar without src prop shows fallback
Styling
Ring Styling
Add colored rings around avatars
Ring with Offset
Add spacing between avatar and ring
Opacity Effect
Semi-transparent avatar for disabled states
Grayscale Filter
Apply grayscale filter for inactive users
Groups
Basic Avatar Group
Display multiple avatars in an overlapping stack
Limited Display Count
Show only first 3 avatars with remaining count
Group Sizes
Control size of all avatars in group
Group with Fallbacks
Avatar group using initials and icons
Real World
User Profile Card
Avatar in a user profile context
John Doe
john.doe@example.com
Comment Thread
Avatars in a discussion context
This is a great implementation!
Thanks! Glad you like it.
Team Members Card
Display team with member count
Team Members
Usage Guidance
✓ When to Use
Use for user profiles, comment systems, user lists, navigation menus with user info, team member displays, chat interfaces. Best for representing users or entities visually.
✗ When NOT to Use
Don't use for decorative images (use img tag), product images (use Image component), logos (use img or Logo component), or status indicators (use Badge).
Props
srcaltfallbackclassNamestylechildrenonClickonChangemaxsize