UI Kit - Avatar


Generally, avatars are used to distinguish between different operators and objects when they are shown in a list or in a small space. Users of applications can upload a custom avatar of their choice.

Avatar example

User avatars are automatically generated by the system, but can be replaced with an image of the user’s choosing. Colors of generated avatars depend on the first letter of the “Full Name” property.

They are displayed as a 32px x 32px circle unless the avatar is the main focus of the view (48px x 48px) or shown in the portal header (24px x 24px).

Generated avatars example

When avatars indicate a group of users (e.g. a workgroup), avatars should show the first letter of the workgroup name, a single letter, and a white inner border.

Group avatars example

Objects can also have avatars. These are distinct from users as they are hollow and square. Object avatars are displayed as 32px x 32px in most of the UI, and 48px x 48px when they are the main focus of the view. The first letter of the first two words defines the content.

Object avatars example