Avatars

We use two different avatar shapes to help viewers tell the difference between user avatars, and avatars for non-user entities (like projects, spaces, groups, rooms, or repositories). Use round avatars for users, and square avatars with rounded corners to identify product entities.

Avatars guidance
Body:
Avatars display an image that represents the user or entity. Display a default image if no custom image has been uploaded.
Badge:
Avatars may have an additional element over one of their four corners. For example, a badge on an avatar can show if the user has approved or declined a pull request in Bitbucket, or show a user's presence (if they're available, away or busy).

Size

Use the guidance below to pick the appropriate avatar size from the 5 available sizes.

User avatars

Size Example Description
16px
Username
Use in on-screen metadata, like in JIRA issues or drop menus.
24px
Username
Use in small areas like 40px text fields.
32px
Username
Use in activity streams, comments, or table views for project listings.
48px
Username
Use in main page titles, for example a user's account settings.
96px
Username
Use in prominent positions on the page, for example in user profiles.

Entity avatars

Size Example Description
24px
Project avatar
Use in on-screen metadata, like in JIRA issues.
32px
Project avatar
Use in table views for project listings.
48px
Project avatar
Use in the expanded Sidebars or a compacted version of the Page header when the 64px variation does not fit.
64px
Project avatar
Use in the Page header for identifying the current entity.
128px
Project avatar
Use in overview pages where avatars are used in a card view.

Default avatars

Show a default avatar when an avatar is unavailable, or a user has not uploaded one.

Default user

User presence badge

Show a user's availability with a presence indicator displaying in the avatar.

State Example Description
Available user available The person is online and available.
Away user available The person is offline or away and unavailable.
Busy user available The person is online but unavailable.