React Avatar - Flowbite

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.

Default avatar

<div className="flex flex-wrap gap-2">
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar img="/images/people/profile-picture-5.jpg" />
</div>

Bordered avatar

<div className="flex flex-wrap gap-2">
  <Avatar
    bordered
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar
    bordered
    img="/images/people/profile-picture-5.jpg"
  />
</div>

Colored avatar

<div className="flex flex-wrap gap-2">
  <Avatar
    bordered
    color="gray"
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar
    bordered
    color="light"
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar
    bordered
    color="purple"
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar
    bordered
    color="success"
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
  <Avatar
    bordered
    color="pink"
    img="/images/people/profile-picture-5.jpg"
    rounded
  />
</div>
<div className="flex flex-wrap gap-2">
  <Avatar
    bordered
    color="gray"
    img="/images/people/profile-picture-5.jpg"
  />
  <Avatar
    bordered
    color="light"
    img="/images/people/profile-picture-5.jpg"
  />
  <Avatar
    bordered
    color="purple"
    img="/images/people/profile-picture-5.jpg"
  />
  <Avatar
    bordered
    color="success"
    img="/images/people/profile-picture-5.jpg"
  />
  <Avatar
    bordered
    color="pink"
    img="/images/people/profile-picture-5.jpg"
  />
</div>

Override image element

<div className="flex flex-wrap gap-2">
  <Avatar img={img} />
  <Avatar img={img} />
</div>

Placeholder

<div className="flex flex-wrap gap-2">
  <Avatar />
  <Avatar rounded />
</div>

Placeholder initials

<div className="flex flex-wrap gap-2">
  <Avatar placeholderInitials="RR" />
</div>

Dot indicator

<div className="flex flex-wrap gap-2">
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    status="online"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    rounded
    status="busy"
    statusPosition="top-right"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    status="offline"
    statusPosition="bottom-left"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    rounded
    status="away"
    statusPosition="bottom-right"
  />
</div>

Stacked

+99

<div className="flex flex-wrap gap-2">
  <Avatar.Group>
    <Avatar
      img="/images/people/profile-picture-1.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-2.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-3.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-4.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-5.jpg"
      rounded
      stacked
    />
  </Avatar.Group>
  <Avatar.Group>
    <Avatar
      img="/images/people/profile-picture-1.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-2.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-3.jpg"
      rounded
      stacked
    />
    <Avatar
      img="/images/people/profile-picture-4.jpg"
      rounded
      stacked
    />
    <Avatar.GroupCounter
      href="#"
      total={99}
    />
  </Avatar.Group>
</div>

Avatar text

Jese Leos

Joined in August 2014

<Avatar
  img="/images/people/profile-picture-5.jpg"
  rounded
>
  <div className="space-y-1 font-medium dark:text-white">
    <div>
      Jese Leos
    </div>
    <div className="text-sm text-gray-500 dark:text-gray-400">
      Joined in August 2014
    </div>
  </div>
</Avatar>

User dropdown

<Dropdown
  inline
  label={<Avatar alt="User settings" img="/images/people/profile-picture-5.jpg" rounded/>}
>
  <Dropdown.Header>
    <span className="block text-sm">
      Bonnie Green
    </span>
    <span className="block truncate text-sm font-medium">
      name@flowbite.com
    </span>
  </Dropdown.Header>
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>

Sizing

<div className="flex flex-wrap items-center gap-2">
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    size="xs"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    size="sm"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    size="md"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    size="lg"
  />
  <Avatar
    img="/images/people/profile-picture-5.jpg"
    size="xl"
  />
</div>

Alternative text

<Avatar
  alt="Default avatar with alt text"
  img="/images/people/profile-picture-5.jpg"
  rounded
/>