Overview

Avatar

Avatars are visual representations of users or entities. When there's a need to show a group of 3 or more users, use the avatar group component.

Avatar

Usage

When to use
Use an image avatar whenever possible to make it stand out. You can also use initials or icon variants. When there's a need to represent multiple entities, such as a list of invitations from different users, use an avatar group instead.
How best to use
Do
Add context to the avatar if the meaning and interaction isn't immediately clear, such as the person, company name, or item type.
Don't
Don't skew the image — the aspect ratio should be 1:1.
Do
You can also use avatars in lists so users can easily scan and identify them.