Avatar Preview

An avatar shows an image or text to represent a person or group as well as give additional information like their status and activity.

If you need to represent many avatars, try avatar group.

Loading...

Resources


Types

Avatar - standard

Standard

Standard avatars are circular containers that generally represent an individual.

Avatar - Group

Group

Group avatars are square containers and represent many people, like teams, organizations, or companies.


Behavior

Avatars can include presence badges to indicate the status of an associated person.

Behavior - presence badges

Avatars can include activity rings to indicate when a person is currently collaborating in a shared activity, like speaking in a Teams call or typing in an Office document.

Behavior - presence badges

Accessibility

It may be difficult for people with visibility impairments to perceive the icon in presence badges on medium avatars (32px) and smaller. Where possible, accompany these avatars with a textual representation of their status, like a tooltip.

By default, avatars are static elements that don’t have states built in. However, if you include additional interactions to provide more context or information, be sure to author in states and keyboarding interactions.

Be sure to include a tab index so that the interaction the avatar enables is accessible to people navigating via keyboard.