Avatar

Avatars are user profile pictures, usually found in circular shapes.

Square Avatars

avatar 1
avatar 2
avatar 3
avatar 4
avatar 5

Add the avatar class to img element to apply the default styles of avatar class. You can also use margin classes to apply margins to your codebase as mentioned in the given code example.

Round Avatars

avatar 1
avatar 2
avatar 3
avatar 4
avatar 5

Add the avatar and avatar-rounded class to img element to apply the default styles of avatar class. You can also use margin classes to apply margins to your codebase as mentioned in the given code example.

Round Avatars with different sizes

avatar 1
avatar 2
avatar 3
avatar 4
avatar 5

Add the avatar class, avatar-round and size of avatar class to img element to apply the default styles of avatar class. The avatar components has 5 sizes, avatar-xxl(5rem), avatar-xl(4rem) avatar-lg(3rem), avatar-sm(2rem), and avatar-xs(1rem). You can also use margin classes to apply margins to your codebase as mentioned in the given code example.