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.

Examples of a user image, user initials, and standard user placeholder icon

When to Use

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Don't

Don’t use the avatar if:

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.

Anatomy

Avatar: Main avatar component with different display options. See Types.
Badge (optional): Visualizes the action triggered by clicking the avatar.
Border (optional): An avatar can have a very subtle border.

Anatomy of an avatar

Types

Avatar – User Image, Initials, or Placeholder

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.

User image, user initials, and standard user placeholder icon

Initials

The initials stand for the first name and last name of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available:

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all 10 accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image and placeholder image

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

Icons are usually part of an icon font. Do not use icons as images.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

<div> <div>Size</div> <div>rem</div> <div>Use for images in…</div> </div> <div> <div>XS</div> <div>2 rem</div> <div>Table list items<br>Card list items</div> </div> <div> <div>S</div> <div>3 rem</div> <div>Card headers<br>Card list items</div> </div> <div> <div>M</div> <div>4 rem</div> <div>App headers for small screen sizes</div> </div> <div> <div>L</div> <div>5 rem</div> <div>App headers for normal screen sizes</div> </div> <div> <div>XL</div> <div>7 rem</div> <div>App headers for large screen sizes</div> </div>

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Badge

If the avatar is clickable, you can display an optional badge and icon to indicate interactivity and hint at the expected action.

Use a badge to indicate that the avatar is interactive.
Use an icon to indicate the action triggered by clicking the avatar.

This feature helps users recognize that the avatar is interactive and is particularly useful for images. Avoid using badges on avatars smaller than size S to ensure both the image and badge are clearly visible. Always include a tooltip that describes the action.

Use the following standard icons and tooltip texts:

<div> <div>Icon</div> <div>Tooltip</div> <div>Action</div> </div> <div> <div><span class="icon icon-edit"></span></div> <div><em><strong>Edit Image</strong></em></div> <div>Edit the image. This can include multiple options, such as replacing an image, cropping, visual effects, or uploading a new image.</div> </div> <div> <div><span class="icon icon-camera"></span></div> <div><em><strong>Take a Picture</strong></em></div> <div>Take a photo.</div> </div> <div> <div><span class="icon icon-zoom-in"></span></div> <div><em><strong>Zoom In</strong></em></div> <div>Zoom into the image.</div> </div>

Avatars with badges

Avatars with badges and edit (left), camera (middle), and zoom in (right)

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
Accessibility: Provide an alternative text for each avatar image for cases when the image is not available or can’t be displayed.
If the avatar is interactive, provide a tooltip to indicate the action (for example, Edit Image or Take a Picture).
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.