Avatars

Avatars are found throughout material designs with uses in everything from tables to dialog menus.

Circular avatars with image

avatar
avatar
avatar
avatar
                
                    <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

avatar
avatar
avatar
avatar
                
                    <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>