Avatars
Use avater of different shapes and sizes with a single component.
Circular
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
Square
<div class="avatar avatar-xl ">
<img class="rounded-none " src="../../assets/img/team/30.webp" alt="" />
</div>Soft
<div class="avatar avatar-xl ">
<img class="rounded-soft " src="../../assets/img/team/30.webp" alt="" />
</div>Content
<div class="avatar avatar-xl ">
<div class="avatar-name rounded-circle "><span>+2</span></div>
</div>+2
Name
<div class="avatar avatar-xl ">
<div class="avatar-name rounded-circle"><span>A</span></div>
</div>A
Emoji
<div class="avatar avatar-xl ">
<div class="avatar-emoji rounded-circle "><span role="img" aria-label="Emoji">🎁</span></div>
</div>🎁
Status
<div class="avatar avatar-xl status-online me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl status-offline me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl status-away me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl status-do-not-disturb me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>Sizes
<div class="avatar avatar-5xl avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-4xl avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-3xl avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-2xl avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-l avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-m avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-s avatar-bordered me-4">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>Avatar Group
<div class="avatar-group mb-4">
<div class="avatar avatar-5xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-5xl ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-5xl ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-5xl ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-5xl ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-5xl ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-4xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-4xl ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-4xl ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-4xl ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-4xl ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-4xl ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-3xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-3xl ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-3xl ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-3xl ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-3xl ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-3xl ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-2xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-2xl ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-2xl ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-2xl ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-2xl ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-2xl ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-xl ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-xl ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-l ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-l ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-l ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-l ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-l ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-l ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-m ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-m ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-m ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-m ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-m ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-m ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
<div class="avatar-group mb-4">
<div class="avatar avatar-s ">
<img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-s ">
<img class="rounded-circle " src="../../assets/img/team/57.webp" alt="" />
</div>
<div class="avatar avatar-s ">
<img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />
</div>
<div class="avatar avatar-s ">
<img class="rounded-circle " src="../../assets/img/team/8.webp" alt="" />
</div>
<div class="avatar avatar-s ">
<img class="rounded-circle " src="../../assets/img/team/58.webp" alt="" />
</div>
<div class="avatar avatar-s ">
<div class="avatar-name rounded-circle "><span>+3</span></div>
</div>
</div>
+3
+3
+3
+3
+3
+3
+3
+3