Avatar

Profile pictures and user representations with various sizes and status indicators

Basic Avatar

Simple avatars with images and placeholders

User Avatar
Show Code

Avatar Sizes

Different sizes for various contexts

User Avatar
Show Code

Avatar with Status Indicators

Online/offline status indicators

User Avatar
Show Code

Avatar with Ring

Avatars with decorative rings

User Avatar
Show Code

Usage Notes

  • Use appropriate sizes based on context (xs for lists, lg for profiles)
  • Provide meaningful alt text for accessibility when using images
  • Use initials as fallbacks when images fail to load
  • Status indicators help show user availability in chat applications
  • Avatar groups work well for showing team members or participants
  • Ring variants add emphasis for important users or selected states