Avatar Sizes

Avatars of different sizes

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

Avatar contains icons to perform respective action.

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

avatars having a offline status indicator.

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

avatars having online status indicator.

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

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

img 2 img 5 img 1 img 7 img 3 img 9
Class Name : .badge.number-badge
Stacked Avatars

Group of avatars stacked together.

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

Group of avatars stacked together.

img img img img img img +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.

xs SM MD LG XL XXL
Rounded Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xs SM MD LG XL XXL