Avatars
Avatars are found throughout material designs with uses in everything from tables to dialog menus.
Circular avatars with image
<div class="avatar avatar-lg-size">
<img src="https://picsum.photos/200?random=1" class="img-responsive img-round" alt="avatar">
</div>
<div class="avatar avatar-md-size">
<img src="https://picsum.photos/200?random=2" class="img-responsive img-round" alt="avatar">
</div>
<div class="avatar avatar-sm-size">
<img src="https://picsum.photos/200?random=3" class="img-responsive img-round" alt="avatar">
</div>
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
Circular avatars with text
NS
NS
NS
NS
<div class="avatar avatar-lg-size avatar-text avatar-primary">NS</div>
<div class="avatar avatar-md-size avatar-text avatar-secondary">NS</div>
<div class="avatar avatar-sm-size avatar-text avatar-primary">NS</div>
<div class="avatar avatar-xs-size avatar-text avatar-secondary">NS</div>
Square avatars with image
<div class="avatar-square avatar-lg-size">
<img src="https://picsum.photos/200?random=1" class="img-responsive img-square" alt="avatar">
</div>
<div class="avatar-square avatar-md-size">
<img src="https://picsum.photos/200?random=2" class="img-responsive img-square" alt="avatar">
</div>
<div class="avatar-square avatar-sm-size">
<img src="https://picsum.photos/200?random=3" class="img-responsive img-square" alt="avatar">
</div>
<div class="avatar-square avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-square" alt="avatar">
</div>
Square avatars with text
NS
NS
NS
NS
<div class="avatar-square avatar-lg-size avatar-text avatar-primary">NS</div>
<div class="avatar-square avatar-md-size avatar-text avatar-secondary">NS</div>
<div class="avatar-square avatar-sm-size avatar-text avatar-primary">NS</div>
<div class="avatar-square avatar-xs-size avatar-text avatar-secondary">NS</div>