Avatar

Used to represent user profile picture or initials.

<Avatar
  initials="FB"
  src="https://i.pravatar.cc/300?img=1"
  alt="avatar"
/>

Examples

Sizes

Use the size prop to change the size of the avatar.

<div className="flex items-center gap-2">
  <Avatar size="xs" src="https://i.pravatar.cc/300?img=1" />
  <Avatar size="sm" src="https://i.pravatar.cc/300?img=2" />
  <Avatar size="md" src="https://i.pravatar.cc/300?img=3" />
  <Avatar size="lg" src="https://i.pravatar.cc/300?img=4" />
  <Avatar size="xl" src="https://i.pravatar.cc/300?img=5" />
  <Avatar size="2xl" src="https://i.pravatar.cc/300?img=6" />
</div>

With Initials

Use the initials prop to render an avatar with initials.

<Avatar initials="ak" />

Square Avatars

Use the square prop to render a square avatar.

<Avatar initials="ak" square />

Avatar Groups

Use utility classes to overlap a list of avatars and style them as a group.

<div className="flex items-center -space-x-2">
  <Avatar
    src="https://i.pravatar.cc/300?img=1"
    className="ring-2 ring-white dark:ring-[#191918]"
  />
  <Avatar
    src="https://i.pravatar.cc/300?img=2"
    className="ring-2 ring-white dark:ring-[#191918]"
  />
  <Avatar
    src="https://i.pravatar.cc/300?img=3"
    className="ring-2 ring-white dark:ring-[#191918]"
  />
</div>

Persona

Here's an example of how to use the Avatar component to display a user persona.

John Mason

john.mason@example.com

Melissa Jones

melissa.jones@example.com

<div className="flex flex-col gap-2">
  <div className="flex items-center gap-2">
    <Avatar size="md" src="https://i.pravatar.cc/300?img=1" />
    <div className="flex flex-col">
      <Heading level={6}>John Mason</Heading>
      <Text>john.mason@example.com</Text>
    </div>
  </div>
  <div className="flex items-center gap-2">
    <Avatar size="md" src="https://i.pravatar.cc/300?img=2" />
    <div className="flex flex-col">
      <Heading level={6}>Melissa Jones</Heading>
      <Text>melissa.jones@example.com</Text>
    </div>
  </div>
</div>