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

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.

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.

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.