Documentation

Avatars

Code snippetsDesign guidelines

Summary

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 and other container metaphors within Atlassian Apps.

User avatars

User avatars come in 5 sizes. All user avatars have a border-radius on them. No sharp edges, please.

Project avatars

Avatars are used for projects, spaces and repositories to give them a visual identity. These avatars are round to clearly differentiate them from user avatars.

Status

API status:general
Included in AUI core?Yes. You do not need to explicitly require the web resource key.
Web resource key:com.atlassian.auiplugin:aui-avatars
Experimental since:5.0
General API status:5.1

Examples

User Avatar User Avatar User Avatar User Avatar User Avatar Project Avatar Project Avatar Project Avatar Project Avatar Project Avatar

Code

<!-- User avatar -->
<span class="aui-avatar aui-avatar-xsmall">
    <span class="aui-avatar-inner">
        <img src="src/img/avatar-16.png"></img>
    </span>
</span>
<!-- Project avatar -->
<span class="aui-avatar aui-avatar-project aui-avatar-xlarge">
    <span class="aui-avatar-inner">
        <img src="src/img/project-64.png"></img>
    </span>
</span>