In Progress

Avatar

An avatar is a visual representation of a user or entity used to personalize UI and communicate identity at a glance. It serves as a compact, recognizable marker of a person or account across interfaces such as navigation bars, comment threads, and user lists.

In Progress

Avatar

An avatar is a visual representation of a user or entity used to personalize UI and communicate identity at a glance. It serves as a compact, recognizable marker of a person or account across interfaces such as navigation bars, comment threads, and user lists.

Anatomy

User initials
Tooltip

Variants

Default
Blue
Navy
Teal
Purple
Orange
Turquoise
Pink
Green
Truncated

States

Default
Hover

Best Practices

Critical actions

Avoid using avatars as the sole identifier in critical actions. In destructive or high-stakes flows (e.g., "Delete account for this user?"), always pair the avatar with a text name or email to prevent costly mistakes from visual misidentification. ¹

Additional Reading

Avatar UI Component: Definition, Examples, Best Practices https://www.uxpin.com/studio/blog/avatar-ui-component/

App Header

Badge

App Header

Badge

Avatar

An avatar is a visual representation of a user or entity used to personalize UI and communicate identity at a glance. It serves as a compact, recognizable marker of a person or account across interfaces such as navigation bars, comment threads, and user lists.

Avatar

An avatar is a visual representation of a user or entity used to personalize UI and communicate identity at a glance. It serves as a compact, recognizable marker of a person or account across interfaces such as navigation bars, comment threads, and user lists.

Anatomy

Variants

Size

Avatar Group

States

Truncated

Best Practices

Critical actions

More

Additional Reading