Create and group avatars of different sizes and shapes with a single component.
<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>
<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>
<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>
<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>
<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>
You can avatar file picker, this comes handy when you want to create profile picture updating scenarios
<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>
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