Avatar

The avatar component allows you to display a thumbnail representation of an individual (or business or entity depending on internal use) in the interface. Avatars are found throughout material design with uses in everything from tables to dialog menus.

Usage

Use avatars:

As a form of visual representation of an individual (or entity) in the interface
To display an image, initials or placeholder icon for a user
In lists, dialog menus, etc.
Alongside additional information about the individual (or entity)

Do not use avatars 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).
You want to show an interactive icon. Instead, use an icon button.

Color usage

The Cegid Design System includes color usage for avatar components.

Icon avatars can have the following color: primary.

Initials avatars can have one of the following colors: primary, pink, orange, green, blue, deep purple, cyan, deep orange, purple, brown, strawberry, gray.

Image avatars do not display any color.

Types

The Cegid Design System includes three types of avatars.

Initials avatar : this version displays letters corresponding to a user’s initials.

Icon avatar : this version displays a standard user icon.

Image avatar : this version displays a specific image representing a user, usually a photo chosen and downloaded by said user.

Anatomy and content

All avatars have a circular shape

Avatars can contain different elements depending on their type:

Background: initials and icon avatars display a background color. Color usage is detailed in the corresponding section.
Initials: initials avatars display letter characters corresponding to the first letter of a user’s first name and last name. They can display up to two letter characters.
Icon: icon avatars display a standard user icon
Image: image avatars display a specific chosen image

Behaviour and interaction

If there is an error loading an avatar image, the component falls back to the defined alternative, generally a default user icon or initials.

You can display a group of stacked avatars.

Responsiveness and density

The standard sizes available for avatars are the following: 16px, 20px, 24px, 32px, 40px, 56px, 72px, 100px.

Choose the one that best fits your use case.

Accessibility

Provide an alternative for each image avatar for cases when the image is not available or can’t be displayed.