Avatars are graphical assets that represent users’ identities across products.

Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.

NOTE: Avatars can be considered as decorative or informative depending on their context and surroundings. Typically, an avatar is displayed adjacent to the user's name, or a sign-in link, therefore making it decorative.

Default Avatar

The default avatar displays the first letter of the user's name.

The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.

NOTE: An avatar with an image should not use color modifier, otherwise the image-treatment scrim will not be applied.

Custom Avatar

Avatars can be customized with an image.

NOTE: Sighted users can visually distinguish an avatar based on the image; for non-sighted users the equivalent experience is the name of the user (not a description of the image contents, e.g. "dog in car"!).

Custom Avatar with Fit

When the image aspect ratio is below 3:4 and not a square, you can add .avatar--fit to make the image fit inside the container

Signed-Out Avatar

The avatar-signed-out icon is used to a represent a user that is not signed in.

Avatar Sizes

Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.