Icon

Clear and consistent icon use should help people complete tasks, providing more affordance for certain actions and features across Atlassian apps. Use icons following these guidelines.

For more on Atlassian's icon style and how icons are drawn, see the iconography foundation.

There are very few icons that have clear associations across cultures and contexts. Use icons with clear and established associations to across the web wherever possible.

We organize our icons in categories to help with consistency across apps and features:

Check the usage description of the icon for details on where it's typically used. You can find these descriptions in the icon explorer or in Figma.

Does the icon aid comprehension or detract? Sometimes having an icon on every single menu item can take away from the overall clarity of a page.

If you're struggling to choose a clear icon for every item in a view or menu, reconsider whether the icons are needed at all.

Make sure any meaningful icons are legible and understandable, including to people using assistive technologies.

Very few icons are clear to all users. Use text labels to clarify what a feature or button is for.

If a UI element has a text label, there’s usually no need to provide an accessible label for the icon as well. The visible text label should communicate the same idea as the icon, and repeating this info to assistive technologies isn’t necessary.

Most of the time, icons are associated with text labels on buttons or other elements. In these cases, don’t provide alternative text for the icon, because the label describes the meaning of the icon already. In code, this can be done by setting the required label prop to an empty string ("").

If an icon doesn’t have an existing text label or accessible text, provide a clear label with the label prop.

Sometimes an icon communicates additional information about a feature, such as a warning status or external link icon. In these cases, make sure that information is available to people using assistive technologies, either through the icon label or through other methods.

When icons are placed inside interactive elements, such as buttons and links, the size of the target for pointer inputs should be a minimum of 24 by 24 pixels, unless exempt from Target Size (Minimum) (Level AA), (opens new window).

Using icon button will ensure the target is large enough, but use caution when composing custom selectable elements with icons.

Our icons were designed to work in harmony with the typography and spacing systems across Atlassian apps. Don't scale or resize the icons. Instead, use existing sizes and components.

The majority of icons in Atlassian apps are 16 by 16px.

Icons have no padding by default, allowing the buttons or other components to control the whitespace between icons and other elements. Use center-alignment to position icons in larger spaces.

Icons are also available at a smaller size for visual alignment in small spaces. Because the size is smaller and harder to read, they should be used sparingly, such as for chevrons in buttons and menus.

We don't offer regular icons larger than 16px.

However, Icon tile comes in varying sizes for specific use cases that require more emphasis or color. Consider using icon tile for icons larger than 16px.

For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).