The avatar is a pure CSS control used to add initials, icons, or images representing people or objects in different shapes and sizes. The avatar control can be easily integrated with controls like list view, badge, cards, and other container controls.
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 control that can be integrated with layout controls, specifically list view and cards. It can be integrated with badge control to represent a notification count like in a mail application.