Icons

Summary

Icons are visual artifacts to communicate, guide and inform the user. They can help users find their way through an interface, make the meaning of buttons clearer, and prepare users for what is happening next. Icons work at their best when they're consistent, familiar and recognizable to the user.

Status

API status:	general
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-experimental-iconfont`
Experimental since:	5.0
General API status:	5.1

Examples

Global vector icons:

Dev tools icons:

Editor icons:

JIRA icons:

Vector icons also available in large:

View Configure Add

You should adjust the alternative text (the text inside the SPAN element) to suit the meaning and usability of your scenario. If you are using it in a button which has the button's action as visible text, you don't need to duplicate the text inside the icon too. However if you are creating an icon-only control, you should include the alternative text.

Code

HTML

Icons are simply SPAN elements with an image or icon font applied. Text inside the span is hidden and can be used as assistive/alternative text.

<span class="aui-icon aui-icon-SIZE aui-iconfont-TYPE">Alternative Text</span>

Soy

{call aui.icons.icon}
    {param useIconFont: true /}
    {param size: 'large' /}
    {param icon: 'configure' /}
{/call}

Options

Icon types: see the Icons demo in the Sandbox to ensure you access the latest list.

Vector icon sizes:

small
large

Simple 'wait' spinner

You're waiting. The user's waiting. Use the wait icon: Loading, please wait

<span class="aui-icon aui-icon-wait">Loading...</span>

By default this icon expects a white background; but will also work in Buttons, Dropdown2, Tabs and Navigation. Small only.