# Avatar
Create and group avatars of different sizes and shapes with a single component.
### Avatar Sizes
```markup
```
### Avatar with text placeholders
```markup
AR
EQ
VV
SM
XS
SS
```
### Avatar Status
```markup
```
### Avatar Group
```markup
AB
```
### Avatar Shape
```markup
```
### Avatar as file picker in forms
You can avatar file picker, this comes handy when you want to create profile picture updating scenarios
#### Markup
```markup
```
#### JS Code for picker
```javascript
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$('.avatar-file-picker').on('change', function () {
readFile(this);
});
```
{% hint style="info" %}
Please note file picker does not upload image on selection
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.atomui.com/ui-elements/avatar.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
