Overview
An avatar is a picture of a user in a virtual environment. An avatar typically represents the user using one of the following: a picture of the user, the user's initials, or a placeholder icon in place of the user's personal information (photo or initials).
Avatars have a predetermined circle shape. This encourages an accurate and equal portrayal of each user on the user interface.
When to use
- Use the same avatar shape in a homogeneous list or group
- Use different avatar colors for the different sources (people, applications, services, objects)
- Use pictures when possible
- Avoid using the same avatar color variations in a list or group of avatars.
- Avoid mixing circle and square avatars in one list or group.
- Avoid altering the size of the icon or shape of the container
- Avoid use of avatars to display content images or galleries.
Types
Photo or Image
The preferred approach is to use a photo of a person, logo of the product, or object when possible.
Initials
The initials are used to represent a person's first and last name; for instance, JD stands for Jane Doe and JvE for Jan van Eyck.
Up to three alphabetical characters can be used as initials (A-Z, a-z). The gender-neutral placeholder symbol is shown in its place if lengthier names (like Anna Mara Agust Suárez) need more than three initials.
If the three letters don't fit inside the circle, the placeholder is also utilized (for example, WWW).
Some languages do not use latin alphabet or don't even utilize initials. Instead, the gender-neutral person icon is shown in those situations.
Icon
When no other picture is available, placeholder icons are utilized for both business and avatar images.
- A symbol of a person in a circle that is gender-neutral serves as the replacement for an avatar by default.
- A neutral product symbol enclosed in a square serves as the standard placeholder for a company picture.
Resources
See more
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.