Iconography

Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability. They should be simple yet bold enough to grab attention. A few ways icons help:

  • 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.

Icon grid

Icons should be designed on both a 20px and a 16px grid (both on a 24px artboard) to accommodate both regular and small icons in applications.

Icon layout grid
The icon layout grid

Shapes

Create icons on the grid using basic foundational shapes, which include; circles, rectangles (horizontal and vertical), and squares. Sticking to these shapes in the grid keeps consistent proportions throughout the icon set.

Proportional icons (square, circle): must have 1px padding around the icon.

Icon grid square Icon grid circle
Square and circle icon layouts

Disproportional icons (Horizontal and vertical rectangle): sides can have a negative space of 3+ pixels and the opposite two sides can touch the borders.

Icon grid rectangle horizontal Icon grid rectangle vertical
Horizontal and vertical icon layouts

Sizes

Icons are available in regular and small sizes. When designing icons, you will sometimes be able to simply resize to the other size. The dashboard icon is a good example of this. The balance between the whitespace and strokes still looks good on resize. However, the branches icon doesn't have that visual luxury. The whitespace in the circles is too small and becomes illegible when shrunk, so it makes more sense to make those elements solid.

Icon dashboard example
Dashboard icon: 20px on a 24px artboard

Icon branch example at 24 px Icon branch example at 16 px
Branch icons at 20px and 16px on 24px artboard

Stroke caps

Using a round cap at the end of strokes adds optimism to the icons. Always use round caps unless you are trying to indicate icon depth, in that case, use a slice to create a butt cap.

Icon stroke cap example

Custom curves

Use the circles available in the grid when designing curves and arcs to keep consistency across the icon set.

Icon curves example 001 Icon curves example 002

Angles

When creating shapes like arrows or when you need more real estate, use angles that are 45 ̊ or 90 ̊. When more subtlety is required, use 30 ̊ or 60 ̊ angles.

Icon curves example 001

Icon depth

A butt cap is used to create depth between two objects in an icon and should never be rounded or touch other elements in the icon. The space between the cap and other icon elements should always be 1px.

Icon curves example 001

Radius

The radius is a key characteristic of Atlassian icons and adds consistency and a fun personality.

  1. All squares and rectangles must have a 2px radius.
  2. Irregularly shaped corners must be curved using a 1px radius.
  3. Inner junctions should never have a radius unless the outer radius exceeds 2px.
Icon curves example 001
1px radius and inner junctions

When creating icons...

  • Design two icons - one on a 20x20px grid and one on a 16x16px grid (both on a 24px artboard).
  • Build from foundational shapes: square, circle, rectangle and oval.
  • Custom curves should be constructed using one of the available circles in the grid.
  • Use a 2px stroke and end with a 'round cap' except when you...
  • Use a butt cap to create depth or show overlapping strokes. Keep 1px space between the butt and other elements.
  • All square and rectangle shapes should use a 2px border radius depending on the size of the shape, and have a minor radius of 1px.