Skip to main content

Avatar

The avatar component displays a visual representation of an entity such as a person or account.

Conventions:

  • circular avatars to quickly identify users
  • square avatars to help identify company logos
  • initals are limited to two characters
Live Editor
<div style={{ display: 'flex', flexDirection: 'row' }}>
  <Avatar
    size="large"
    initials="LH"
    shape="circle"
    primaryImage="https://picsum.photos/id/1062/300"
    secondaryImage="https://reactjs.org/favicon.ico"
  />
</div>
Result
Loading...

Sizes

SizeAvatarAvatar & Company
large40px48px
medium28px32px
small20px24px
tiny14px16px

Properties

Avatar Properties
NameTypeDefault ValueRequiredDescription
initialsstringYesInitials used as a default for when there is no profile picture
primaryImagestringNoCompany Logo or User Photo image source
secondaryImagestringNoSmall avatar of company logo
shape"circle" | "square"circleNoMain avatar can change shape from square to circular and vice versa
size
"small"
 | "tiny"
 | "medium"
 | "large"
largeNoSize of avatar

Changelogs