FB
<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.
ak![]()
<Avatar initials="ak" />Square Avatars
Use the square prop to render a square avatar.
ak![]()
<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>