Avatars
Avatars
Avatars are small visual cues highlighting a user, group, file type, channel, or case type. Avatars are always at the beginning of a string of text or list item. In some cases, they may be customized to provide further personalization.
User Avatars
Overview
User avatars highlight individuals associated with specific content.

Patterns and usage
- Use user avatars whenever the content is highly personal (such as in conversations in Pulse) or if the user is critical to case information (such as Last updated data)
- Non-customized user avatars display the first letter of the user's first name / given name and the first initial of the last name / family name
- Very small renderings of the non-customized user avatars will display on the first letter of the first name
- People-type avatars, such as User, are always presented in a circle
Group Avatars
Overview
Group avatars show a unique brand or collection of users associated with the current group or action.

Patterns and usage
- Use group avatars whenever displaying a team, organization, or many contributors
- Non-customized Group avatars should show only a single user when rendered very small
Channel Avatars
Overview
Channel avatars highlight the unique interaction paths a user is submitting feedback through. Examples include comments via Twitter or responses via email.

Patterns and usage
- Generic channels, such as chat, phone, chatbot, and email use Cosmos' generic palette
- Brand-specific channel avatars, such as Facebook or Twitter, should adopt that brand's color palette
- Due to the personal nature of the channel's relationship to a user, Channel avatars are similar to People-like avatars and be represented within a circle
File Attachment Avatars
Overview
File attachment avatars show the basic type of file attached. Visual assets (such as videos and images) will display a thumbnail or the poster image of the asset.

Patterns and usage
- Generic avatars represent any unknown filetypes or media load failure fallbacks
- Audio avatars may represent any HTML5 supported audio type
- Email avatars may represent EML, EMAIL, and WDSEML files
- Image avatars may represent any HTML5 supported image type
- Presentation avatars represent PPT, PPTX and Keynote files
- Spreadsheet avatars represent a large range of spreadsheet file types
- Text avatars may represent PDFs and a large range of text-based file types
- URL avatars represent an attached link
- Video avatars may represent any HTML5 supported video type
- Object-type avatars, such as File type, are presented in a rounded square
Object Avatars
Overview
Each Object or Case type within Cosmos should have an icon associated with it to make it much easier to discover similar types of work. Object avatars show up in an Object pages' header or within the app-wide search results.

Patterns and usage
- Object-type avatars are presented in a rounded square
- Non-customized Object avatars fallback to a briefcase icon
Looking for legacy UI Kit content? Click here
Last updated: May 2020