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 display an image that represents the user or entity. Display a default image if no custom image has been uploaded.
- 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).
Use the guidance below to pick the appropriate avatar size from the 5 available sizes.
||Use in on-screen metadata, like in JIRA issues or drop menus.|
||Use in small areas like 40px text fields.|
||Use in activity streams, comments, or table views for project listings.|
||Use in main page titles, for example a user's account settings.|
||Use in prominent positions on the page, for example in user profiles.|
||Use in on-screen metadata, like in JIRA issues.|
||Use in table views for project listings.|
||Use in the expanded Sidebars or a compacted version of the Page header when the 64px variation does not fit.|
||Use in the Page header for identifying the current entity.|
||Use in overview pages where avatars are used in a card view.|
Show a default avatar when an avatar is unavailable, or a user has not uploaded one.
User presence badge
Show a user's availability with a presence indicator displaying in the avatar.
|Available||The person is online and available.|
|Away||The person is offline or away and unavailable.|
|Busy||The person is online but unavailable.|