Intro

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

An image, initials, or placeholder for a user
Standardized images for business-related content (such as product, parts, product and company logos, ad campaign images, ...)
Icons
Images with a transparent background
Placeholder images
You want to include an image for any other use case (for example, to display decorative images or images in the content area that support or complement the content). Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Types

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Structure and Components

Behavior & Interaction

When user has photo uploaded use photo.
When no photo was uploaded show initials (latin script).
No photo, non latin script show neutral employee icon.

If there is no image, icon or initials set, the Avatar displays a Placeholder. If there is invalid image src, the control displays either initials (if provided) or icon Placeholder (if no initials are proivided):