Overview

Key Features

• Content Type: Supports display of user images, initials or icons.
• Size Options: Available in 5 different sizes.
• Color Options: Offers 10 predefined background colors.
• Accessibility: Fully keyboard navigable and screen-reader accessible.

---

Content Type

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

---

Sizes

The avatar comes in 5 different sizes: xs, sm, md, lg, xl.

---

Initials

The initials can be customized

---

Look and feel

There are 10 different color styles available for the Avatar.

---

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Component checklist

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.