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.
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 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.
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.
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.
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.
Use the circles available in the grid when designing curves and arcs to keep consistency across the icon set.
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.
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.
The radius is a key characteristic of Atlassian icons and adds consistency and a fun personality.
- All squares and rectangles must have a 2px radius.
- Irregularly shaped corners must be curved using a 1px radius.
- Inner junctions should never have a radius unless the outer radius exceeds 2px.
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.