Avatar

Create and group avatars of different sizes and shapes with a single component.

Avatar Sizes

<div class="avatar avatar-xxl">
    <img src="assets/img/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
    <img src="assets/img/users/user-5.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
    <img src="assets/img/users/user-6.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar with text placeholders

<div class="avatar avatar-xxl">
    <span class="avatar-title rounded-circle ">AR</span>
</div>

<div class="avatar avatar-xl">
    <span class="avatar-title rounded-circle ">EQ</span>
</div>

<div class="avatar avatar-lg">
    <span class="avatar-title rounded-circle ">VV</span>
</div>

<div class="avatar">
    <span class="avatar-title rounded-circle ">SM</span>
</div>

<div class="avatar avatar-sm">
    <span class="avatar-title rounded-circle ">XS</span>
</div>

<div class="avatar avatar-xs">
    <span class="avatar-title rounded-circle ">SS</span>
</div>

Avatar Status

<div class="avatar avatar-online">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-away">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-dnd">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-offline">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar Group

<div class="avatar-group">
    <div class="avatar ">
        <img src="assets/img/users/user-2.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>

    <div class="avatar ">
        <img src="assets/img/users/user-3.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>

    <div class="avatar">
        <img src="assets/img/users/user-4.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>

    <div class="avatar ">
        <img src="assets/img/users/user-5.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>

    <div class="avatar ">
        <span class="avatar-title rounded-circle">AB</span>
    </div>
</div>

Avatar Shape

<div class="avatar avatar-xl">
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img ">
</div>

<div class="avatar avatar-xl">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded">
</div>

<div class="avatar avatar-xl">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Avatar as file picker in forms

You can avatar file picker, this comes handy when you want to create profile picture updating scenarios

Markup

<label class="avatar-input">
    <span class="avatar avatar-lg">
        <img src="assets/img/users/user-9.jpg" alt="..."
             class="avatar-img rounded-circle">
         <span class="avatar-input-icon rounded-circle">
        <i class="mdi mdi-upload mdi-24px"></i>
    </span>
    </span>
    <input type="file" class="avatar-file-picker" >
</label>

JS Code for picker

 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);
    });

Please note file picker does not upload image on selection