Loading 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 |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-icon, com.atlassian.auiplugin:aui-iconography
|
| AMD Module key: | N/A |
| Experimental API: | 5 |
| General API: | 5.1 |
Examples
You should adjust aria-label 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 (i.e. the icon is decorative), you should leave the
icon's label empty. However if you are creating an icon-only control (the
icon is informative), you should include the alternative text.
Code
Informative icon
Use for an icon-only control.
Icons are simply span elements with an image or icon font
applied. Use aria-label as assistive/alternative text, and
role="img".
HTML - old pattern
This pattern was used before AUI 9.6.0. While still working, it's not
encouraged anymore because role="img" and
aria-label attributes have better screen reader support.
HTML - preferred pattern
Soy
Decorative icon
Use when a text following the icon describes its purpose.
HTML
Soy
Options
Vector icon sizes:
- small
- large