Avatar Sizes

Avatars of different sizes

imgimgimgimgimgimg
Classes : .avatar-[size]
Values : xs, sm , md , lg , xl , xxl
Avatars
imgimgimg
Without radius : .avatar.avatar-radius-0
With Radius : .avatar
Round Avatar : .avatar.avatar-rounded
Avatar With Icons

Avatar contains icons to perform respective action.

imgimgimgimgimgimg
Class Name : .badge.number-badge
Avatar With Ofline Status Indicators

avatars having a offline status indicator.

imgimgimgimgimgimg
Class Name : .avatar.offline
Avatar With Online Status Indicators

avatars having online status indicator.

imgimgimgimgimgimg
Class Name : .avatar.online
Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

img2img5img1img7img3img9
Class Name : .badge.number-badge
Stacked Avatars

Group of avatars stacked together.

imgimgimgimgimgimg+8
Class Name : .avatar-list-stacked for parent div
Rounded Stacked Avatars

Avatar contains intials when user profile doesn't exist.

imgimgimgimgimgimg+8
Class Name : .avatar-list-stacked for parent div & .avatar-rounded for .avatar
Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xsSMMDLGXLXXL
Rounded Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xsSMMDLGXLXXL