Avatars

Avatars are used to add a human touch and instant clarity when understanding which user did what in the application. We also use avatars for projects, repositories, spaces, groups and other container metaphors within Atlassian apps.

User avatars

User avatars come in 5 sizes. All user avatars are shown inside a circle mask.

Size Example Description
16px
Username
Only use this size avatar when screen real estate is at an absolute premium e.g. A dropdown menu that makes 24px avatars look too squished
24px
Username
Use this size when the user appears as metadata on the screen e.g. Meta data on a JIRA issue
32px
Username
Primarily used as a statement avatar e.g. Activity streams and Comments
48px
Username
Use this size for main page titles e.g. On the account settings for a user
96px
Username
Used for the hero element e.g. User profiles or info panels on hover

Project avatars

Avatars are used for projects, spaces, groups and repositories to give them a visual identity. Project avatars, like user avatars, are also shown inside a circle mask.

Size Example Description
24px
Project avatar
Used when screen real estate is tight. Acceptable to use in menus
32px
Project avatar
Used in table views for project listings
48px
Project avatar
Used in the expanded Sidebars or a compacted version of the Page header where the 64px variation does not fit
64px
Project avatar
Primarily used in the Page header for identifying the current entity
128px
Project avatar
Used in overview pages where avatars are used in a card view