Avatar Component

A graphical representation of a user's identity.

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.

Terminology

We use the following terminology when discussing this pattern.

• Avatar : The visual representation of a user, which can be an image, initial(s), or placeholder icon.
• Decorative Avatar : An avatar that is adjacent to descriptive text (such as a user's name) and does not need to be announced to screen readers.
• Informative Avatar : An avatar that stands alone without adjacent text and must convey user information to assistive technologies.