Avatar

used as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.

Note: I have set the root font-size to 10px for this library.

Instructions to import the Avatar component in your CSS or HTML:

Profile Avatar

has 6 different sizes:

av_xxl: 14rem

av_xl: 12rem

av_lg: 10rem

av_md: 8rem

av_sm: 6rem

av_xs: 4rem

Square Avatar

similar to the Profile Avatar, with a different shape:

av_xxl: 14rem

av_xl: 12rem

av_lg: 10rem

av_md: 8rem

av_sm: 6rem

av_xs: 4rem

Text Avatar

can be Profile or Square, has 3 color variants:

sui_v1

sui_v2

sui_v3