Avatar

The following components are available to display an avatar of a user:

  • <Avatar>
  • <AvatarStack>

Examples

Single Avatar

Use the <Avatar> component to display a single avatar.

<Avatar src="https://hyvor.com/image.png" />
Hyvor Logo

Size

<Avatar src="https://hyvor.com/image.png" size="small" />
<Avatar src="https://hyvor.com/image.png" size="medium" />
<Avatar src="https://hyvor.com/image.png" size="large" />
<Avatar src="https://hyvor.com/image.png" size={64} /> <!-- any custom width -->
Hyvor Logo Hyvor Logo Hyvor Logo Hyvor Logo

Avatar Stack

Wrap multiple <Avatar> components with <AvatarStack> to display them as a stack.

<AvatarStack>
    <Avatar src="https://hyvor.com/image.png" />
    <Avatar src="https://hyvor.com/image.png" />
    <Avatar src="https://hyvor.com/image.png" />
</AvatarStack>
Hyvor Logo Hyvor Talk Logo Hyvor Blogs Logo

If you set a size in your <Avatar>s, make sure to set the same size to the <AvatarStack> component.

Table of Contents