Avatar

The Open UI Kit Avatar represents a person, team, workspace, or entity with an image, initials, or icon.

Introduction

Avatar keeps identity cues compact and consistent across navigation, tables, cards, comments, and ownership surfaces. Use an image when a recognizable profile photo or entity image is available. Use initials or an icon when the image is missing, private, or not useful.

Import

import { Avatar, AvatarGroup } from '@open-ui-kit/core';

Content

Avatar supports three content modes: src, initials, and icon. Images render with an overlay treatment on hover, while initials and icons use Open UI Kit brand colors.

Sizes

Use size="L" for primary identity moments and size="M" for dense surfaces such as tables, sidebars, and compact lists.

Groups

Use AvatarGroup to show a small set of related people or entities. The group passes its size to child avatars so the stack stays visually consistent.

Props

Avatar

AvatarGroup

Accessibility

Provide alt text for image avatars when the image communicates identity. If the surrounding UI already names the person or entity, use concise alt text to avoid repeating too much information for assistive technology.

Usage guidance

• Prefer real images for recognizable people and organizations.
• Use two-letter initials for people and short entity names.
• Use icons for generic users, system actors, or unknown identities.
• Keep avatar groups small so the overlap remains readable.