Avatar Preview

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

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

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

Additionally, avatars at 40 and 56 pixels can display a cutout that communicates other dynamic information, like reactions, mentions, and recent file activity. Avatar cutouts are useful for at-a-glance information in areas where space is limited, like notifications and activity feeds. Cutouts and presence are never shown at the same time.

Avatar cutout

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.