Shapes

Default avatar is square in shape. For rounded and circle avatar add .avatar-img .rounded and .avatar-img .circle modifier classes respectively.

user
user
user
DG
DG
DG
Sizing

Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm or .avatar-xs for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.

user
user
user
user
user
user
Avatar with initials

In need of an avatar, but not the image avatar? Replace the default modifier class with .avatar-text .avatar-text-* ones to create avatar with name initials.

PR
IN
SC
DG
WN
TL
GD
PK
ID
LT
DK
ClassValues
class="avatar-text avatar-text-[value]"primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Avatar with inverse initials

Replace the default modifier class with .avatar-text .avatar-text-inv-* ones to create avatar with inverse colors.

PR
IN
SC
DG
WN
TL
GD
PK
ID
ClassValues
class="avatar-text avatar-text-inv-[value]"primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Groups

Wrap a series of avatars with .avatar in .avatar-group. Use .avatar-group-lg and .avatar-group-sm for additional sizes.

user
user
user
PR
user
user
user
RD
user
user
user
IN
Overlapped Avatar Group

For overlapped group of avatars replace default modifier class with .avatar-group-overlapped.

user
user
user
RD
user
user
user
IN
user
user
user
GR
Adding icon to avatar group

Add icons instead of initials by using i tag inside avatar. Change the font sizes using font utilities.

user
user
user
user
user
user