Avatar

Avatar can be used to show a user's profile picture on the profile information page, on the navigation bar, and in blogs grid items.

Standard Round Avatars

The avatar component has 4 sizes avatar--lg avatar--md avatar--sm avatar--xs

Round Avatars with Status

Avatars support status indicators. There are four indicators:
avatar__status--online avatar__status--offline avatar__status--idle avatar__status--busy

Text Avatars

You can use initial letters of user in Avatar as well. You need to include class avatar-text along with avatar and size class.
avatar__text avatar--lg with avatar__text--lg and avatar--sm with avatar__text--sm

Note: Used 10px as root font size.