Also known as:
An avatar represents an individual or group visually.
Autocomplete (not built)
Avatar (not built)
Badge (not built)
Button Group (not built)
Card (not built)
Date Picker (not built)
Divider (not built)
Infinite Scroll (not built)
Loading Skeleton (not built)
Loading Spinner (not built)
Pagination (not built)
Search Field (not built)
Tabs (not built)
Tile (not built)
Need 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.
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
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.
text, use their name.
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.
Link vs button
Atlassian Design: avatars
Hudl: avatars overview
Lightning Design System: avatar
Ant Design: avatar
Spectrum: tag avatar
W3C: Personal names around the world
© Culture Amp Pty Ltd
Link to Culture Amp site