Avatar
Icons and/or text that represent users or entities.
Avatars are visual and/or textual representation elements of users and entities within a product. They help to personalize products and tailor experiences to the user and their preferences.
Also known as: User icon, user avatar, profile image, profile avatar, thumbnail, UIImageView (iOS), ImageView (Android).
Anatomy
A. Avatar element (required): Icon, text, initials, or image representing the user or profile.
B. Dropdown chevron (optional): UI icon indicating the menu can expand or collapse.
Usage
| When to use | When not to use |
|---|---|
| As a visual representation of a user or entity in your application. | In situations where privacy is a concern, as displaying a user’s avatar might not be appropriate. |
| For a more personalized user experience. Can be used to indicate who is currently logged in, which is especially useful in multi-user environments. | If the avatar doesn’t serve a clear function like leading to a user’s profile or settings. |
Best practices
- Use avatars to identify users in the main part of the app navigation.
- Implement avatars to function as nav menus when used in navigation components.
- Apply proper alt text to any images such as the user’s name when icons, initials, or images are used.
- Enable users to change the avatar style of their experience.
- Reference Fictitious brand and user aliases (internal only) guidelines for placeholder names.
- Follow all guidance for implementing badges on avatars.
Avatar styles
There are four styles of avatars that can be used within an experience. Consider selecting a default avatar style for your application and enabling users to customize this style at a later time.
Icon
The icon avatar is a generic representation of a user using an icon.
Text
The text avatar displays the user’s name in an adjustable text format.
Initials
The initials avatar shows the user’s initials in one or two characters.
Image
The image avatar uses a customizable profile image to represent the user.
Behaviors
Avatar used in navigation
When an avatar is used in navigation components, it’s treated the same as navigation links that activate a nav menu. In the pressed state, the background color of the avatar will change to match the background color of the nav menu. To learn more, reference Horizontal navigation guidance.
Profile representation
Representing a user profile, account, issuer, or brand can use the same basis without the menu button.
- Use standard icon sizes of 24x24 or 48x48. Whichever size you choose, be consistent throughout the application.
Content
- Always use title case for names including companies or entities.
- Don’t use punctuation.
- Follow all best practices and guidelines implementing links. Reference Link for more information.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing in navigation.
