Avatar

Create and group avatars of different sizes and shapes with a single component.
Avatar Sizes 
1
<div class="avatar avatar-xxl">
2
    <img src="assets/img/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
3
</div>
4
​
5
<div class="avatar avatar-xl">
6
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
7
</div>
8
​
9
<div class="avatar avatar-lg">
10
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
11
</div>
12
​
13
<div class="avatar">
14
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
15
</div>
16
​
17
<div class="avatar avatar-sm">
18
    <img src="assets/img/users/user-5.jpg" alt="..." class="avatar-img rounded-circle">
19
</div>
20
​
21
<div class="avatar avatar-xs">
22
    <img src="assets/img/users/user-6.jpg" alt="..." class="avatar-img rounded-circle">
23
</div>
Copied!
Avatar with text placeholders
1
<div class="avatar avatar-xxl">
2
    <span class="avatar-title rounded-circle ">AR</span>
3
</div>
4
​
5
<div class="avatar avatar-xl">
6
    <span class="avatar-title rounded-circle ">EQ</span>
7
</div>
8
​
9
<div class="avatar avatar-lg">
10
    <span class="avatar-title rounded-circle ">VV</span>
11
</div>
12
​
13
<div class="avatar">
14
    <span class="avatar-title rounded-circle ">SM</span>
15
</div>
16
​
17
<div class="avatar avatar-sm">
18
    <span class="avatar-title rounded-circle ">XS</span>
19
</div>
20
​
21
<div class="avatar avatar-xs">
22
    <span class="avatar-title rounded-circle ">SS</span>
23
</div>
Copied!
Avatar Status
1
<div class="avatar avatar-online">
2
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
3
</div>
4
<div class="avatar avatar-away">
5
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
6
</div>
7
<div class="avatar avatar-dnd">
8
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
9
</div>
10
<div class="avatar avatar-offline">
11
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
12
</div>
Copied!
Avatar Group
1
<div class="avatar-group">
2
    <div class="avatar ">
3
        <img src="assets/img/users/user-2.jpg" alt="..."
4
             class="avatar-img rounded-circle">
5
    </div>
6
​
7
    <div class="avatar ">
8
        <img src="assets/img/users/user-3.jpg" alt="..."
9
             class="avatar-img rounded-circle">
10
    </div>
11
​
12
    <div class="avatar">
13
        <img src="assets/img/users/user-4.jpg" alt="..."
14
             class="avatar-img rounded-circle">
15
    </div>
16
​
17
    <div class="avatar ">
18
        <img src="assets/img/users/user-5.jpg" alt="..."
19
             class="avatar-img rounded-circle">
20
    </div>
21
​
22
    <div class="avatar ">
23
        <span class="avatar-title rounded-circle">AB</span>
24
    </div>
25
</div>
Copied!
Avatar Shape
1
<div class="avatar avatar-xl">
2
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img ">
3
</div>
4
​
5
<div class="avatar avatar-xl">
6
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded">
7
</div>
8
​
9
<div class="avatar avatar-xl">
10
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
11
</div>
Copied!
Avatar as file picker in forms
You can avatar file picker, this comes handy when you want to create profile picture updating scenarios

Markup
1
<label class="avatar-input">
2
    <span class="avatar avatar-lg">
3
        <img src="assets/img/users/user-9.jpg" alt="..."
4
             class="avatar-img rounded-circle">
5
         <span class="avatar-input-icon rounded-circle">
6
        <i class="mdi mdi-upload mdi-24px"></i>
7
    </span>
8
    </span>
9
    <input type="file" class="avatar-file-picker" >
10
</label>
Copied!
JS Code for picker
1
 function readFile(input) {
2
        if (input.files && input.files[0]) {
3
            var reader = new FileReader();
4
​
5
            reader.onload = function (e) {
6
                $(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result);
7
            };
8
​
9
            reader.readAsDataURL(input.files[0]);
10
        }
11
    }
12
    $('.avatar-file-picker').on('change', function () {
13
         readFile(this);
14
    });
15
​
Copied!
Please note file picker does not upload image on selection

UI Elements - Previous

Modals

Next - UI Elements

Tables

Last modified 2yr ago

Copy link

Contents

Avatar Sizes

Avatar with text placeholders

Avatar Status

Avatar Group

Avatar Shape

Avatar as file picker in forms