Components

Avatar

Avatars are how we visually represent our users.

Appearance

The leaf is used when the avatar will represent a user working within Sprout.

The circle is used when the avatar will represent a user on social.

Common sizing

Sizes of avatars vary widely across the app. However, here are some known sizes and their usage.

SizeUse
20pxCommonly used as the avatar size in the compact . However, is seen across multiple densities.
32pxCommonly used in small .
40pxThe default size, used in the large density.

Color

We encourage users to display authenticity by using an image for their avatar, however in cases where the user does not provide an image we default to colors. While color overrides remain, it is strongly recommended that consumers utilize type and variant props accessible color palettes.