Avatars

The -avatar component is typically used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. A t

Your first avatar

<web-avatar
  color="indigo"
  url="https://flowbite.com/docs/images/people/profile-picture-5.jpg">
</web-avatar>

More examples

<div class="p-5 space-x-5 w-10/12 flex">
  <web-avatar
    color="indigo"
    url="https://flowbite.com/docs/images/people/profile-picture-5.jpg">
  </web-avatar>

  <web-avatar
    color="indigo"
    class="pt-7"
    url="https://flowbite.com/docs/images/people/profile-picture-5.jpg">
    YH
  </web-avatar>
</div>