Avatar

An avatar represents an individual or group visually.

Also known as:
Profile pictureDisplay picture

AnchorNeed to know

  • Use an avatar to help a user in the platform efficiently identify another person or an organization.
  • Use a profile avatar to represent an individual and an account avatar for an organization.
  • When an avatar photo is unavailable, fall back to initials or first initial.

Visuals

UI Kit

To keep in mind

  • Where possible, link the avatar to details about the individual or group it represents:
    • Where appropriate, link the avatar to a context-specific view of that individual or group. Otherwise, link to their canonical "profile" page.
    • Don't link the avatar while it's shown on the individual's canonical "profile" page.
  • When there is no personal photo to show, use initials:
    • Because personal names differ around the world, consider avoiding using initials that may not represent an individual accurately. You might show their full name instead.
    • We tend to use the first letter of each space-separated word for initials and capitalize them. You may need to resize the initials text for more than 4 names.
    • When showing someone the avatar that represents them, show the personal avatar using the personal background color.
    • When showing someone an avatar for another user, show the generic avatar using the generic background color.
  • When there is no specific individual or group identified, use the default user avatar.
    • For example, if you were previewing a 360 survey template with no specific user assigned, you might show a default user avatar.
  • Use with name:
    • Provide a text label showing the individual or group's name near the avatar when it's the only place the name is shown.
    • Use an empty alt="".
  • Use without name:
    • You might skip showing the individual or group's name when the avatar is shown in a list and linked to a place where the name is shown.
    • For alt text, use their name.
  • Loading:
    • If an image fails to load, fall back to the default user avatar.

When to use and when not to use

When to use
  • Use an avatar to help people efficiently identify another person in the platform visually.
  • Use an avatar to distinguish people with the same name.
When not to use
  • Avoid an avatar when most people or groups won't have an image to show.

See also

External links