# 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 %}