Avatars

An avatar is a visual way to represent a person or series in a user interface. Using avatars encourages empathy and builds trust between users and the content, and between users themselves.

https://www.figma.com/design/JlsXcbEQZyWfAJCGvSDVv4/Torii-by-SUGOI?node-id=576-2466&t=4y6Ntsh9Tjh54mTD-1www.figma.com

Link to Avatar component in Figma

Specs

Avatar

At a minimum, an avatar contains a circle container and content inside –either a user-added photo or fallback items. The component also supports optional Badge.

Avatar with different sizes in px

Avatar with Badge

Avatar also supports optional use of Badges to show notifications, counts, or status information on navigation items and icons. 
For now, we only provide this component in combination with 32px and 40px Avatars. Future combinations may be designed if needed.

Examples of Avatar with Badge

Changelog