Avatar

Use the Avatar Component as a graphical representation of a person through a profile picture or image, an icon, or a string with initials. The Avatar is visually identical to the Ignite UI for Angular Avatar Component

Avatar Demo

Type

The Avatar can carry different types of content such as an image, a string with initials, or an icon.

Size

The Avatar comes in three different sizes:

Large - Suitable for profile pages
Medium - Appropriate for custom menus and visualizations
Small - Easily embedded in a contact list and similar repetitive scenarios

Shape

The avatar comes in two distinct types, determined by its shape: a circle and a square form. In Figma we also support a rounded square shape.

Styling

The Avatar comes with styling flexibility through the various options for the background color, as well as initials and their text style, and icon and its color, where applicable.

Usage

When using an Avatar with initials or icons, pick their colors carefully to assure good contrast with the Avatar background color. Avoid colors with poor contrast like similar shades of the same color or combinations that create chromatic aberrations.

Do	Don't