The avatar is a pure CSS component used to add initials, icons, or images representing people or objects in different shapes and sizes. The avatar component can be easily integrated with components like list view, badge, cards, and other container components.
The avatar supports images to represent profile images in any application, like Mail, Outlook, GitHub, StackOverflow, etc.
The avatar represents profile initials in different sizes.
The avatar can be either square or circular with five different sizes: x-small, small, medium, large, and x-large. By default, the avatar is rendered in a square shape, medium size.
The avatar supports well-known media types, icons, SVG, font icons, and text.
As the avatar is implemented purely in CSS, we can completely customize the attribute dimensions and colors.
The avatar is an integral component that can be integrated with layout components, specifically list view and cards. It can be integrated with the badge component to represent a notification count like in mail applications.