An avatar is a circular image used for representing a unique user.

General guidelines

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.

Component overview

Component overview

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.

Back to top