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 ComponentAnatomy
Types
Avatars should be used as visual cues to help a user identify an item faster, especially in long lists or content dense user interfaces not to add necessary visual flair.
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
Initial avatars are generated and associated with a user when they sign up for Procore. 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. Unless a user uploads an image and converts their avatar into an image avatar, this avatar will appear next to their name in select locations. For example, in the Project and Company Directory tools.
States
Variations
Type
Medium (32px)Used for all lists.
Large (40px)
Used in the header for the user profile image.
Used in the header for the user profile image.
Image
Icon
Initial
Specifications
Styling
