Default accordion 
<div class="flex flex-wrap gap-2">
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
</div>
Bordered Avatar 
<div class="flex flex-wrap gap-2">
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true} bordered={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered={true} />
</div>
Placeholder 
<div class="flex flex-wrap gap-2">
  <Avatar />
  <Avatar rounded={true} />
</div>
Dot indicator 
<div class="flex flex-wrap gap-2">
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" status="online" />
  <Avatar
    img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
    rounded={true}
    status="busy"
    statusPosition="top-left"
  />
  <Avatar
    img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
    status="offline"
    statusPosition="bottom-right"
  />
  <Avatar
    img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
    rounded={true}
    status="away"
    statusPosition="bottom-left"
  />
</div>
Stacked
+99
<AvatarGroup>
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true} stacked={true} />
</AvatarGroup>
<AvatarGroup>
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded={true} stacked={true} />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded={true} stacked={true} />
  <AvatarGroupCounter total={99} href="#" />
</AvatarGroup>
Avatar text
Jese Leos
Joined in August 2014
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true}>
  <div class="space-y-1 font-medium dark:text-white">
    <div>Jese Leos</div>
    <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
  </div>
</Avatar>
User dropdown 
<Dropdown arrowIcon={false} inline={true}>
  <Avatar
    slot="label"
    alt="User settings"
    img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
    rounded={true}
  />
  <DropdownHeader>
    <span class="block text-sm"> Bonnie Green </span>
    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
  </DropdownHeader>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>
Sizing 
<div class="flex flex-wrap items-center gap-2">
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xs" />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="sm" />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="md" />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="lg" />
  <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xl" />
</div>