Avatar

We use avatars to visually represent our users, places, and things in the app. These can be in the form of rich media or representative illustrations.
Demo and Developer GuidelinesFigma Component

Anatomy

Types

Image

Image avatars are provided by users and can be used for company logos or pictures, such as user profile pictures.
Rich media should always be cropped correctly to avoid clipped or distorted images.

Icon

Icon avatars are are used throughout the app to represent different objects, such as companies or distribution groups. Icon avatars use icons from our system set.

Initials

The initials consists of the first letter of the user’s first name and the first letter of the user’s and last name in a gray-filled circle.” should be “The initials consists of the first letter of the user’s first name and the first letter of the user’s last name within a gray-filled circle.

States

Variations

Type
Medium (32px)Used for all lists.
Large (40px)
Used in the header for the user profile image.
Image
Icon
Initial

Specifications

Styling