In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Avatar

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.

The picture is showing a list of Avatars in different size with different status.

Best practices

  • Always frame the uploaded image on all sides where it is shown.
  • It is possible to use a tooltip to display the person’s name.
  • Never authorize two different pictures for a single user’s avatar.
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.

The picture is showing different kind of avatars (with a placeholder, for chatbots and with a picture for humans)
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