Iconography

Icons are visual artifacts to communicate, guide and inform users. They can be used to:

  • Reference an existing content type within application, for example the type of a JIRA issue or a Confluence page
  • Help users understand UI elements and navigate an interface
  • Communicate a secondary status, for example the priority of a JIRA issue. For communicating the primary status, use lozenges.

When you use an icon, consider where and how it is currently used elsewhere in the Atlassian suite of applications, and make sure that the meaning you prescribe to it is the same or at least similar. Don't repurpose an established icon for a different action.

Be mindful of how icons are used in specific components, like the application header, buttons, or messages

Delivering icons as images presents challenges when they need to scale or change color. Therefore, Atlassian maintains a custom 'icon font'. Icons that are delivered by the icon font in AUI are available in small (16px) and large (32px) sizes. They are not optimised for any other sizes. The Atlassian icon font is updated continuously. Always try to use icon font icons over other icons.

Icons

Add Add
Add comment Add comment
Add Small Add Small
Approve Approve
Appswitcher App switcher
Arrow down Arrow down
Arrow left Arrow left
Arrow right Arrow right
Arrows down Arrows down
Arrows left Arrows left
Arrows right Arrows right
Arrow up Arrow up
Arrows up Arrows up
Attachment Attachment
Attachment small Attachment small
Autocomplete date Autocomplete date
Back to page Back to page
Binary Binary
Blog Blog
Blog large Blog large
Decisions blueprint Decisions blueprint
Default blueprint Default blueprint
Files blueprint Files blueprint
How to article blueprint How to article blueprint
JIRA issues blueprint JIRA issues blueprint
Meeting notes blueprint Meeting notes blueprint
Retrospectives blueprint Retrospectives blueprint
Shared links blueprint Shared links blueprint
Troubleshoooting article blueprint Troubleshoooting article blueprint
Branch Branch
Branch small Branch small
Browse up Browse up
Build Build
Build cancelled Build cancelled
Build disabled Build disabled
Build progress Build progress
Bullet Bullet
Calendar Calendar
Check out Check out
Clone Clone
Close dialog Close dialog
Collapsed Collapsed
Comment Comment
Commented file Commented file
Commit Commit
Compare Compare
Completed task Completed task
Configure Configure
Confluence Confluence
Copy to clipboard Copy to clipboard
Delete Delete
Deploy Deploy
Details Details
Document Document
Drag vertically Drag vertically
Edit Edit
Edit small Edit small
Email Email
Email large Email large
Emoticon Emoticon
Error Error
Expanded Expanded
File File
Code file Code file
Document file Document file
Excel file Excel file
Java file Java file
PDF file PDF file
PPT file PPT file
Text file Text file
WAV file WAV file
ZIP file ZIP file
Flag Flag
Focus Focus
Folder Folder
Folder open Folder open
Fork Fork
Group Group
Handle horizontal Handle horizontal
Help Help
Hipchat Hipchat
Homepage Homepage
Image Image
Image extra small Image extra small
Image small Image small
Info Info
JIRA JIRA
Layout Layout
Layout 1 column large Layout 1 column large
Layout 2 columns large Layout 2 columns large
Layout 2 columns left large Layout 2 columns left large
Layout 2 columns right large Layout 2 columns right large
Layout 3 columns large Layout 3 columns large
Layout 3 columns center large Layout 3 columns center large
Like Like
Like small Like small
Link Link
List add List add
List remove List remove
Locked Locked
Locked small Locked small
Code macro Code macro
Default macro Default macro
Gallery macro Gallery macro
Status macro Status macro
Mention Mention
More More
Navigation tree Navigation tree
Navigation tree large Navigation tree large
Blank page Blank page
Blogpost page Blogpost page
Default page Default page
Template page Template page
Pages Pages
Pages large Pages large
Pull request Pull request
Quote Quote
Redo Redo
Remove Remove
Remove label Remove label
Repository Repository
Repository forked Repository forked
Repository locked Repository locked
Review Review
RSS RSS
Search Search
Search small
Share Share
Show help Show help
Side-by-side diff Side-by-side diff
Sidebar link Sidebar link
Sidebar link large Sidebar link large
SourceTree SourceTree
Default space Default space
Personal space Personal space
Star Star
Submodule Submodule
Success Success
Symbol Symbol
Table Table
Table add column left Table add column left
Table add column right Table add column right
Table add row above Table add row above
Table add row below Table add row below
Table background Table background
Table copy row Table copy row
Table cut row Table cut row
Table header column Table header column
Table header row Table header row
Table merge cells Table merge cells
Table paste row Table paste row
Table remove Table remove
Table remove background Table remove background
Table remove column Table remove column
Table split cells Table split cells
Task Task
Table of contents Table of contents
Tag Tag
Tag small Tag small
TeamCals TeamCals
TeamCals large TeamCals large
Test session Test session
Text align center Text align center
Text align left Text align left
Text align right Text align right
Text bold Text bold
Text color Text color
Text horizontal rule Text horizontal rule
Text indent Text indent
Text italic Text italic
Text bullet list Text bullet list
Text number list Text number list
Text outdent Text outdent
Text underline Text underline
Time Time
Undo Undo
Unfocus Unfocus
Unlocked Unlocked
Unstar Unstar
Unwatch Unwatch
User User
User large User large
User status User status
View View
View card View card
View list View list
View table View table
Warning Warning
Watch Watch
Workbox Workbox
Workbox empty Workbox empty

Download

The Atlassian icon font is available for download for use in your Atlassian product or Add-on.

Download icon font

Supplying other icons

When you use icons that are not in the icon font, make sure they support retina displays. Use SVGs where more than one color or sizes bigger than 32px are required, or where the icon needs to be animated. If your application supports browsers like Internet Explorer 8 or older, you must provide PNG backups if the icon is used to convey critical information.