Avatar

An avatar is a thumbnail representation of an entity, such as a user or an organization.

Example

Patterns

Alt text

By default, avatars are decorative. Standalone avatars with no surrounding context must provide alt text for accessibility.

Props

Name

The name prop is used to derive initials when a source image isn’t available.

Size

The size can be one of the predefined options to ensure alignment with other elements in a layout.

When a name is provided the intials will scale with size of the avatar. For xsmall avatars only one character is displayed.

© 2025 @jossmac