Avatar
An avatar represents an individual or group visually.
Also known as:
Profile pictureDisplay picture
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider
- Dropdown
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Text Area Field
- Text Field
- Tile
- Tile Grid
- Toast Notification
- Toggle Switch
- Tooltip
- Well
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.
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
alttext, 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.