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 come in 5 sizes. All user avatars are shown inside a circle mask.
||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|
||Use this size when the user appears as metadata on the screen e.g. Meta data on a JIRA issue|
||Primarily used as a statement avatar e.g. Activity streams and Comments|
||Use this size for main page titles e.g. On the account settings for a user|
||Used for the hero element e.g. User profiles or info panels on hover|
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.
||Used when screen real estate is tight. Acceptable to use in menus|
||Used in table views for project listings|
||Used in the expanded Sidebars or a compacted version of the Page header where the 64px variation does not fit|
||Primarily used in the Page header for identifying the current entity|
||Used in overview pages where avatars are used in a card view|