Avatars represent people by displaying their initials.




  • Represent a person nearby the content they're related to. For example, avatar could be placed near the source they created.
  • As a purely visual element near the person's name.


  • When representing anything else, but a person.


Inherits margin props.


string | undefined

User's full name

size"md""2xs" | "xs" | "sm" | "md"

The avatar size

On this page

  • Example
  • Guidelines
  • When to use
  • When not to use
  • Props