An avatar is a photographic representation of a user (usually a portrait). The avatar can stand alone, but is often associated with a username.
Use the avatar when it is necessary to visually identify a user, which could be in a login area in the app header, or in a chat post, or in a work group restricted to certain users, for example.
It helps to personify users and make them more human for other app users (a face is much easier to recognize by the human brain). Moreover, contextual information may be displayed with a click on the avatar (profile, account configuration, replacing the photo, etc.).
In case no picture has been uploaded yet or no image is available (for a guest user, for example), in these cases, an image placeholder is used by default.
Best practices
Always put the avatar in a circle mask: the format is perfectly adapted for a face format.
Don't use another format. Lines will not be equidistant to each other, which will generate more time to scan the picture for the user, especially while browsing a long list.
Visual guidelines
Visual Variants
If the user doesn’t have any pictures, we recommend using a placeholder picture by default. For non-human users (robots), we recommend using a dedicated picture. The picture can be changed by the user.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.