Avatar Shapes

Use avatar class to style an avatar. Your can also use the following classes avatar-square, avatar-rounded, avatar-circle to change the shape of the avatar.

Avatar 1
Avatar 2
Avatar 3

Avatar Sizes

Use avatar-sm , avatar-md and avatar-lg to size avatars. Default is avatar-md.

Avatar 1
Avatar 2
Avatar 3
Avatar 4
Avatar 5

Avatar With Placeholder Icons

Example of avatar with placeholder icons.

Avatar With Placeholder Text

Example of avatar with placeholder text.

AB
AB
AB

Avatar With Theme Color

Use any contextual color class avatar-* to change the background color of the avatar.

AB
AB
AB
AB
AB
AB
AB

Avatar With Status Indicator

Example of avatar with status indicator.

Avatar 1
Avatar 2
Avatar 3
Avatar 4

Avatar Group

Use avatar-group to group avatars.

Avatar 1
Avatar 2
Avatar 3
Avatar 4
Avatar 5
2+