Avatar

Guidelines React

The Avatar component is a graphical representation of an individual or business, through a profile picture, image, icon, or set of initials.

Types

Multiple types of avatars are availablet to suit your use-case. The user profile icon, initials & even image options are useful when used to display a login profile, adding a level of personalization to the page.

Variants

There are two style variants: Filled and Outlined. While there are no strict guidelines for choosing one over the other, your selection should align with the overall design of your application. For instance, if your application’s main color is the ‘secondary’ blue, opting for the ‘secondary’ outlined avatar ensures sufficient contrast against the dark blue background.

Sizes

Avatar is available in four sizes: x-small, small, medium, and large.