Avatars

An Avatar is a graphical representation of a user. The user can be represented by an image, an icon or the user initials. Avatars can provide additional information like the user status or user notifications.

Variations

Rounded avatars

Rounded avatars with borders

Rounded avatars with top badge

Rounded avatars with bottom badge

Rounded avatars with top indicator

Rounded avatars with bottom indicator

Rounded avatars with tooltip

Full rounded avatars

Full rounded avatars with borders

Full rounded avatars with top badge

Full rounded avatars with bottom badge

Full rounded avatars with top indicator

Full rounded avatars with bottom indicator

Full rounded avatars with tooltip

Grouped Avatars

Usage

Use the Avatar Component as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.

Specs

Avatars comes in 2 styles, base rounded - with 0.25rem (4px) border-radius, and full rounded corners. They also come in 4 sizes (xs, sm, base and lg) and they can contain an image, icon or initials to represent the user, along with badge indicator and toolitps:
  • Extra Small: 1.5rem (24px) width and height with 1rem (16px) icon size (for the icon version and 0.75rem (12px) font size (for the version with the initials). The xs avatar size uses the xs size badge
  • Small: 2rem (32px) width and height with 1.25rem (20px) icon size (for the icon version) and 1rem (16px) font size (for the version with the initials). The small avatar size uses the sm size badge
  • Base: 2.5rem (40px) width and height with 1.5rem (24px) icon size (for the icon version) and 1.125rem (18px) font size (for the version with the initials). The small avatar size uses the base size badge
  • Large: 3rem (48px) width and height with 1.5rem (24px) icon size (for the icon version) and 1.125rem (18px) font size (for the version with the initials). The small avatar size uses the base size badge

Accessibility notes

To make the avatars accessible make sure that:

  • Image avatars: provide an alt/title attribute that corresponds to the user.
  • Icon avatars: provide an aria-labelledby attribute along with a set of <title> and <desc> attributes for your SVG to describe the user.

Check out the latest release!