Avatars are user's face image that you can use throughout the design from tables to dialog or menus with options for sizes and shapes.

Sizes

An avatar can have different sizes like larger and smaller avatar.

<div class="avatar avatar-xs"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-sm"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-md"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-lg"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-xl"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-xxl"><img src="..." class="rounded-circle" alt=""></div>

Shapes

An avatar can have different shapes by using Bootstrap's border-radius utilities classes.

<div class="avatar"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar"><img src="..." class="rounded" alt=""></div>

<div class="avatar"><span class="avatar-initial rounded-circle">df</span></div>

Status Indicator

An avatar can have a status indicator to indicate users availability.

df

<div class="avatar avatar-online">...</div>
<div class="avatar avatar-offline">...</div>