Avatar
Edit this pageAvatars are visual representations of users, entities, or objects. They provide a quick way to identify individuals and add personality to interfaces through images, initials, or icons.
AccessibleResponsiveCustomizableInteractiveStatus Indicators
Purpose and Usage
Understanding when and how to use avatars effectively in your interface.
Core Purpose
- • Identity: Represent users, customers, or entities
- • Recognition: Quick visual identification
- • Personalization: Add human touch to interfaces
- • Status: Show online/offline states
Best Practices
- • Always provide meaningful alt text
- • Use consistent sizing within contexts
- • Implement graceful fallbacks
- • Consider cultural sensitivities
Avatar Types
Profile Avatar: User profile pictures
JD
Initial Avatar: Text-based fallback using initials
Icon Avatar: Symbolic representation
Content Guidelines
Proper alt text and accessibility guidelines for avatar implementation.
Alt Text Guidelines
Any time you use an image to communicate a concept, it's important to use descriptive alt text. This is essential for accessibility because it allows screen readers to describe what's in the image to people who may not be able to see it.
For avatars, we recommend using this format:
- • alt="Person's name" if the avatar represents a person
- • alt="Business's name" if the avatar represents a business
- • alt="" if the name of the person/business appears next to the avatar as text
Examples
SJ
alt="Sarah Johnson"Good: Person's name when used standalone
AC
alt=""Good: Empty alt when name appears as text
References & Further Reading
Essential references for avatar component implementation and best practices from leading design systems.