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

See also

• Link vs button.

External links

• Atlassian Design: avatars.
• Hudl: avatars overview.
• Polaris: avatar.
• Pinterest: avatar.
• Lightning Design System: avatar.
• Ant Design: avatar.
• Spectrum: tag avatar.
• Redbubble: avatar.
• W3C: Personal names around the world.