> For the complete documentation index, see [llms.txt](https://yoseph.gitbook.io/webui-library-docmantation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yoseph.gitbook.io/webui-library-docmantation/reference/components/avatars.md).

# 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>
```

![](https://726504214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlBEHnHvQHsrkFIxIdDvV%2Fuploads%2F8AfnIDcVuTzb1dapLHen%2Favatar.png?alt=media\&token=b08f089e-aedc-4198-a858-d6cd7409674f)

#### 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>
```

![](https://726504214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlBEHnHvQHsrkFIxIdDvV%2Fuploads%2FllETP3q4BINGrdaRBJTh%2Favatars.png?alt=media\&token=74478b58-86d1-47b2-9b14-ed372e334f14)