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.
Resources
Types
Standard
Standard avatars are circular containers that generally represent an individual.
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.
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.
Accessibility
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.