Iconography

Icons are symbols designed represent concepts or specific features. A company's iconography style can express a lot about a brand and its values.

Atlassian's iconography has rounded corners and curves to align with our typography and other rounded UI elements. Sharp interior corners and end caps add boldness and practical clarity to the otherwise round, friendly icons in Atlassian products.

Follow these principles to design and use Atlassian icons in a cohesive, useful, and readable way.

Design for universal understanding

Design icons that use widely recognized symbols and established visual metaphors. Ensure icons are easily understood by a diverse audience by avoiding specific cultural or language aspects.

Balance simplicity and detail to create legibility

Craft icons that are simple enough for quick recognition, yet detailed enough to convey meaning effectively, even at small sizes.

Maintain visual harmony

Ensure icons work together as a cohesive system by adhering to consistent size, shape, and style guidelines across the entire set.

Use icons intentionally

Icons are powerful signifiers that can aid comprehension and help with navigation. They can also add clutter or confuse people when used poorly. Use text labels to support icons wherever possible, and avoid using icons where they aren’t necessary.

Atlassian icons are available as a component (React), Figma library, and in our documentation:

• Icon library

• Icon component usage

• Icon tile

• Figma library of Atlassian icons

Atlassian’s icon style has a 1.5px stroke width with shapes that pair rounded corners with sharp interior corners and square line caps.

Wherever possible, use existing icons that are already familiar to customers to maintain consistency and clarity of concepts across Atlassian products.

Do

Use an existing icon for consistency and clarity wherever possible.

Don’t

Create a new icon if a suitable one already exists.

Use simplified shapes with the minimum detail required to express a metaphor. The goal of icons is to aid clear, quick comprehension, and excess detail may distract and do the opposite. The small size of icons also makes it harder to see fine details.

Do

Use simple shapes with the minimum detail required to express a metaphor. The goal of icons is to aid quick comprehension at a small size.

Don’t

Don’t add excess detail. This may distract and be challenging to read, especially at a small size.

For new icons, use symbols that clearly represent a concept. Try to use metaphors with clear and established associations wherever possible.

Do

Use symbols that clearly represent a concept. Use metaphors with clear and established associations across software tools wherever possible.

Don’t

Use caution when creating an icon that isn’t a widely established symbol. It may be confused with another concept or misunderstood.

Shapes should appear straight on or from a full 90 degree profile. Don’t use diagonal perspectives to create 3D shapes because these can be hard to discern at a glance, especially for people with some cognitive disabilities.

Do

Use shapes that appear straight on or from a full 90 degree profile.

Don’t

Don’t use diagonal perspectives to create 3D shapes — these aren't consistent and can be hard to discern at a glance.

Most system icons share common shapes that sit within a 16 by 16px bounding box by default. A select set of utility icons are also available at 12px.

We recommend using padding to apply even spacing around the icon following our spacing scale and grid.

Icons can’t be resized, but icon tiles are available as a more flexible, illustration-like alternative. Consider using an icon tile for different glyph sizes in your design.

Icons use consistent shapes to ensure a consistent look and feel across the set. We’ve designed each shape for optical scale and balance, so that taller, thinner shapes don’t feel like a different scale from shorter or wider shapes.

When designing new icons, you can use our templates with built-in key shapes to guide your designs.

Reusing existing shapes from other icons can also help aid consistency. Make sure to use shapes that best represent the object metaphor you are expressing.

We use a 1.5px stroke on all icons. Don’t use different stroke widths.

Do

Use 1.5 stroke on all icons.

Don’t

Don't alter the weight or stroke width of the icons. This can cause inconsistency and hurt legibility..

When drawing new icons in our templates, we recommend drawing on a 4x template at a 6px stroke width, then shrinking the final design back down to achieve the 1.5px stroke width. This makes it easier to get the details right while drawing.

Curved edges lend to a friendlier feel, but keep internal edges sharp to maintain clarity.

Do

Where possible, keep internal angles sharp.

Don’t

Don’t apply curves on internal anchor points.

End points should be sharp and square when possible.

Do

Square off end points.

Don’t

Don’t round off strokes.

Like most elements in our system, icons use design tokens for colors. Icons can use icon-specific color tokens or text color tokens for when you're matching an icon and text color. You can set the color of the icon using the icon component.

Both icon and text color tokens are designed to have enough color contrast against backgrounds and surfaces in Atlassian products.

Currently Atlassian teams can contribute icons to our system for new designs and features.

Before contributing an icon, look at our existing icon library and consider the following questions:

• Is the icon i’m contributing very similar to another system icon?

• Can I use an existing multi-purpose icon?

• Could my icon be confused with another concept that exists in products?

• Does this design really require an icon at all? Would a text label, button, or other affordance be clearer?

To contribute a new icon, follow the contribution guide (Atlassian employees only).

• Browse all icons and learn how to use them in products with the icon component.

• For the old icon style, view information on the legacy icon foundation and legacy icon component.