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.




Avatar - standard


Standard avatars are circular containers that generally represent an individual.

Avatar - Group


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


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


It may be difficult for people with visibility impairments to perceive the icon in presence badges on medium avatars (32 pixels) 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.

To include a focus state, use createFocusOutlineStyle. Be sure to include a tab index so that the interaction the avatar enables is accessible to people navigating via keyboard.