Web UI Playbook

Avatar

Edit this file

Visual representations of users, entities, or objects for quick identification.

Purpose of Avatars

Understanding the core purpose and benefits of avatar components in user interfaces.

Identity

Represent users, customers, or entities visually for quick identification.

Recognition

Enable fast recognition and personalization in interfaces.

Status

Communicate online/offline presence and other states at a glance.

Core Functions

Visual Identity:

Display user or entity images, initials, or icons for clear identification

Status Indication:

Show online, offline, busy, or away states visually

Group Representation:

Display teams, participants, or shared entities as avatar groups

Personalization:

Add a human touch and context to digital experiences

When to Use Avatars

Understanding the appropriate contexts for avatar components.

Use Avatars When:

• Displaying user or entity profiles
• Showing online/offline or custom status
• Representing team members or participants
• Adding personalization to interfaces
• Indicating ownership or authorship

Avoid Avatars When:

• No meaningful visual context is provided
• For purely textual or tabular data
• When space is extremely limited
• When privacy is a concern
• For decorative purposes only

Avatar vs Alternatives

Component	Primary Use	Interaction	Visual Weight	Example Context
Avatar	Identity, status, group	Minimal/optional	Medium	Profile, team, chat
Icon	Symbolic, quick action	Clickable	Low	Buttons, menus
Initials	Fallback, identity	None	Low	No image available
Image	Personalization	None	Medium	Profile, directory

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

alt="Sarah Johnson"

Good: Person's name when used standalone

Acme Corporationalt=""

Good: Empty alt when name appears as text

References & Further Reading

Essential references for avatar component implementation and best practices from leading design systems.

Adobe Spectrum - Avatar Component

Atlassian Design - Avatar Usage

Shopify Polaris - Avatar Component

Uber Base Design - Avatar

Visa Design - Avatar Accessibility

Wise Design - Avatar Component