Icons are a cornerstone of Atlassian’s visual language. Every day, these small symbols guide users through complex interfaces, make actions instantly recognizable, and help shape the overall product experience. After six years of using an icon system that grew to over 350 icons created by different product teams, Atlassian saw clear signs that it was time for an evolution. The existing icons had served well, but the landscape of design and user expectations had changed. In this blog, we explore how Atlassian reimagined its iconography building a new icon system that brings clarity, cohesion, and quality at scale, while meeting the evolving needs of their products and customers.

Why Atlassian Needed a New Icon System

Inconsistency and visual weight: Over time, subtle inconsistencies in the old icon set became noticeable. Icons varied in size and spacing, and some metaphors conflicted between products. The legacy icons were drawn with heavy strokes that made them visually dominant in the interface, to the point that designers sometimes had to use lighter gray colors to tone them down next to text.
Outdated style: Market preferences for interface design had shifted. The chunky, heavy look of the old icons felt out of place in modern, clean user interfaces. Atlassian’s UI had evolved with new typography and a lighter aesthetic, and the icons needed to catch up so everything felt harmonious.
Scattered custom icons: Whenever teams found gaps in the icon set, they created their own icons in isolation. This flexibility helped ship features quickly, but it led to duplicate or variant icons across different products. An internal audit uncovered over a thousand custom icons floating around, many representing the same concept in different ways. This sprawl was inefficient, hard to maintain, and confusing for users who expect consistency.
New technical needs: Changes in technology and platform requirements exposed limitations of the old icons. They needed an icon system that could scale down or up and remain clear and legible, and a system that could be extended easily without breaking consistency.

All these challenges pointed to an exciting opportunity: modernize Atlassian’s iconography, fix the inconsistencies, and establish a future-ready foundation that empowers designers and enhances the user experience.

Crafting a Modern Icon Style

Atlassian’s design team set out to give the icons a bold new look that would feel fresh yet still familiar. One of the first changes was refining the basic stroke weight and canvas size of every icon. In the old system, each icon was drawn on a 24×24 pixel canvas with a thick 2px stroke. This made icons appear heavy and overly prominent next to text. To create a better balance with Atlassian’s recently updated typography, the team redrew every icon on a more compact 16×16 pixel canvas using a thinner 1.5px stroke line. This subtle change instantly made the icons feel lighter and more in tune with the text around them. Designers also paid close attention to pixel alignment: every line and curve was aligned to the pixel grid to ensure maximum crispness and clarity, especially on lower-resolution displays where a fuzzy icon can hurt legibility.

Beyond weight and sharpness, the style of the icons was updated to mesh with Atlassian’s evolving brand language. Atlassian’s newer branding features bold, geometric shapes that look great in marketing materials. However, when those shapes were tested directly in the products, they overpowered other interface elements. The solution was to blend the best of both worlds: combine the sharp, angular qualities of the Atlassian brand style with the softer, friendlier curves of Atlassian’s new typeface. The design team opted for outlined icon shapes with lighter stroke weights rather than solid, filled-in graphics. The result is a set of icons that feels balanced within the product UI modern and sleek, but not so loud that they distract from content. Each icon looks like it belongs, complementing the text and layout, while still aligning with Atlassian’s broader brand identity.

Side-by-side showing old 2px stroke icons versus new 1.5px stroke icons for improved balance.

Ensuring Consistency in Icon Sizes

Visual consistency isn’t just about style; it’s also about size. One major issue with the legacy icon set was inconsistent sizing. Some icons appeared noticeably larger than others, leading designers and developers to manually scale them down in different contexts. Those ad-hoc adjustments created further inconsistencies in stroke width and padding, undermining the visual cohesion of Atlassian’s applications. A prime example was the simple “Add” or plus icon depending on which version or size was used, the icon could look completely different across the product.

To solve this, Atlassian standardized on a single core icon size. Every icon in the new system is designed to be comfortably used at 16×16 pixels, which is an optimal size that fell between the old system’s small and medium icon dimensions. At 16px, the icons are big enough to be clear on screen, but not so large that they dominate. Importantly, the 1.5px stroke weight chosen for the new icons was calibrated to match the stroke weight of standard UI text, so icons and text feel visually balanced side by side.

Even with a core size defined, there are always a few places in an interface where a smaller icon is needed. In the old system, there was no good solution for these cases: if a designer used the normal icon, it looked too big or had awkward empty space around it; if they used a smaller icon, it often wasn’t designed for that size and looked misaligned or too faint. Initially, Atlassian’s designers tried creating a small set of special 12×12 pixel icons drawn from scratch to fit in those snug spaces like dropdown arrows or status indicators. These utility icons maintained the same 1.5px stroke so they wouldn’t appear thinner, and they did solve some problems for specific instances. The drawback was that only a handful of icons were available in this small size, which limited their usefulness as product needs grew. Teams increasingly wanted every icon to potentially be used alongside small text, and the one-off approach couldn’t cover all those scenarios.

The breakthrough was realizing they could downscale the entire 16px icon set to 12px systematically. Instead of redrawing hundreds of icons at multiple sizes, the team generated 12px versions of each core icon. They had been careful in designing the larger icons with clarity in mind, and it turned out that simply reducing them to 75% of their size still preserved their legibility. In fact, the downscaled icons ended up aligning even better with the smaller text they accompanied, because both the icon’s size and its stroke weight were reduced in proportion. Now Atlassian’s products have two flexible options: a standard 16px icon for most cases, and a 12px icon for compact UI elements. Both are derived from the same master designs, which means they look consistent with each other and maintain the same style and visual weight. The days of some icons feeling “too big” or out of place are over—the icon system is now predictable and uniform in how icons scale.

Different legacy add icons compared to the new consistent 16px core icon.

Clear Taxonomy for Icon Usage

Refreshing the icons’ appearance was only part of the challenge. Atlassian also needed to ensure that icons are used consistently and meaningfully throughout their products. During the audit of the old icon usage, the design team discovered that the same icon was sometimes being used to mean different things in different contexts. This is a serious issue because icons are like visual language if one symbol is used for multiple concepts, users can easily get confused or misinterpret what a button or indicator means. The team realized that along with new icon artwork, they had to provide clear guidelines on what each icon represents and how to choose the right icon for the right purpose.

To do this, Atlassian introduced a simple taxonomy that divides icons into two categories: single-purpose icons and multi-purpose icons. A single-purpose icon is one that has a very specific meaning or is tied to a particular feature. It should only be used in that one context across all Atlassian products. For example, the icon representing “Atlassian Intelligence” is used exclusively to denote that feature and nothing else. Similarly, an icon for a concept like a “Work item” or a “Share” action is intended to be unique to that concept. By naming these icons after the feature or object they stand for, designers are clearly guided to use them only for that purpose. On the other hand, a multi-purpose icon is more generic and can fit several uses. These icons are named by their visual appearance rather than a specific feature for instance, an icon showing a globe might simply be named “Globe” and can be used wherever a globe symbol makes sense. Likewise, a basic arrow icon doesn’t have a single meaning; it could point the way in a navigation menu, indicate progression to the next step, or be used in numerous other contexts. What’s important is that these multi-purpose icons are not tied to one feature, so their names and documentation reflect that flexible usage.

By classifying the icon library this way, Atlassian helps ensure that everyone using the design system understands the intent behind each icon. If an icon is single-purpose, the team knows not to reuse it for something else unrelated. If it’s multi-purpose, they know it’s safe to use in a variety of situations as long as the metaphor holds up. This taxonomy, along with clear naming and usage guidelines in the documentation, prevents the mix-ups that previously happened and keeps the user experience consistent. In short, the same icon will now represent the same idea everywhere, and distinct ideas will have distinct icons.

Icon Lab: A Collaborative Icon Repository

Another key aspect of the new system is how Atlassian handles the growth of the icon set. In the past, the design system team tightly controlled the core set of icons, and there wasn’t an easy way for product teams to add new icons to it. This led to the situation where teams would go off and create their own icons as needed, which, over time, created the fragmentation and duplication issues noted earlier. Atlassian’s solution was to introduce Icon Lab, a centralized hub for icon contributions from any team.

Icon Lab acts as a single source of truth for all Atlassian icons. It’s essentially an extended icon library where teams across the company can submit new icons they need for their products. By centralizing these contributions, Atlassian ensures that new icons are visible to everyone and reviewed for consistency. If two teams need an icon to represent the same concept, they can now see that and collaborate instead of unknowingly designing two different icons. Icon Lab is built to feel like a natural extension of the Atlassian Design System.

To make contributing to Icon Lab as smooth as possible, Atlassian’s design systems team developed a custom Figma plugin. This plugin streamlines what used to be a tedious process of adding a new icon. It automates many repetitive tasks, such as setting up the correct canvas and grid, exporting the icon in various formats, and creating a preview. It also prompts the designer to fill in important details like the icon’s name, its category, and guidelines on how it should be used. With a single click, a designer can package up a new icon, and developers can then quickly pull those updates into Atlassian’s React component library and documentation site. In other words, the entire pipeline from design to development to documentation has been optimized. This ease of contribution has encouraged teams to actually use the system: already more than 275 icons designed by various product teams have been contributed through Icon Lab, greatly expanding the icon set without sacrificing consistency.

Moreover, Atlassian backs up Icon Lab with education and support. They provide internal guides on how to plan and draw icons so that even designers who are not icon specialists can contribute high-quality symbols. These guides cover everything from choosing the right metaphor to pixel-perfect drawing techniques and following the style rules. By providing both the tools and the knowledge resources, Atlassian has created an environment where the icon library can grow in a healthy, governed way. Product teams feel empowered to get the icons they need for new features, and the central design system team can ensure the overall set remains cohesive. It’s a win-win that turns what used to be a Wild West of icons into a collaborative effort.

[Suggested image: "Designers collaborating and contributing icons to a centralized design system library on a computer screen"]

Comparison of single-purpose and multi-purpose icons in Atlassian’s new taxonomy.

Tools for a Seamless Migration at Scale

Implementing a new icon system across an entire company’s products is no small feat. Atlassian’s apps like Jira, Confluence, Trello, and others collectively had tens of thousands of places in the code where icons were referenced. Swapping out the icons wasn’t just a visual update; it meant dealing with changes in icon sizes, file names, and even some behavior. To roll out the new icons smoothly without breaking anything, Atlassian’s team created a suite of tools and processes to support the migration:

Feature flagging: For a change this large, it was crucial to test gradually. Atlassian introduced feature flags to toggle the new icon system on and off in different environments or for different sets of users. Instead of requiring every team to manage dozens of individual flags for each icon change, the design system team provided central “migration switches” and backward-compatibility options. This way, products could run the old and new icons side by side during the transition period. Teams could enable the new icons for testing and user feedback, and disable them if any issues arose, all without significant overhead.
ESLint rule and auto-fixer: The team built an automated code migration tool in the form of an ESLint rule. ESLint, a code linter, can flag patterns in code and even fix them. Atlassian’s custom rule scanned for any usage of old icon references in code. Backed by a manual mapping of each of the 350 legacy icons to its new equivalent, the tool could automatically replace many old icons with the new ones. About 75% of icon occurrences were swapped over to the new system through this auto-fix, which saved engineers countless hours and ensured consistency. The remaining instances (like those that didn’t have a one-to-one replacement) were flagged for developers to handle manually, with guidance provided.
Icon Facade: While the ESLint approach handled static code, Atlassian devised another clever solution for dynamic testing, especially in a large application like Jira. They created an “icon facade” layer in the code. This is essentially a wrapper that intercepts requests for old icons and serves back a new icon instead, at runtime. With the facade in place, Jira was able to preview the new icon designs across thousands of screens without having fully migrated the code. It gave teams confidence that the new icons worked well everywhere and bought time to focus on more complex migration tasks. Notably, this trick allowed Atlassian to deploy the new icons in products faster than expected, since they didn’t have to wait for every single line of code to change first.
Custom icon extractor: A significant challenge was identifying all the icons that weren’t part of the official library those custom SVG files developers had slipped into the code over the years. To tackle this, Atlassian engineers wrote a tool that scans code repositories for any SVG files. When it found them, it would automatically generate snapshots of each icon and compile them into a document for review. This gave the design team a clear list of all the rogue or custom icons out in the wild. They could then triage them: some could be replaced with new standard icons, others needed redesigning to fit the new style. This proactive audit meant no icon was left behind unaddressed.
Icon Explorer documentation: Alongside the code and design work, Atlassian improved the way people discover and implement icons. They launched a new Icon Explorer on their Atlassian Design website. This online tool allows anyone at the company to browse the entire icon collection filtering by name, category, or usage and see all the details about each icon. Designers and developers can quickly look up an icon, read a description of its purpose, find if there’s a new version replacing an old one, and even copy a ready-made code snippet to use the icon in their project. The Icon Explorer is mobile-friendly and optimized for quick searching, making it much easier for teams to adopt the new icons correctly. Having thorough documentation and a handy reference like this was critical to ensure that once migrated, teams stayed on the right path with how they use the icons.

By deploying this bundle of tools and documentation, Atlassian successfully executed one of the largest component migrations in its history with remarkable speed and efficiency. What could have been a chaotic, error-prone overhaul was instead a well-orchestrated process. Teams could adopt the new icons at their own pace, with safeguards in place to catch mistakes. The combination of automated fixes and human-friendly documentation exemplifies how technical tooling can support a design system rollout at scale.

Code example showing Atlassian’s old API with an attachment icon import.

Lessons Learned from the Icon Overhaul

This icon system redesign was a massive effort, and it taught Atlassian’s design system team valuable lessons about how to drive consistency across many products. Some key takeaways included:

Invest in tooling, not just design: Great design was essential to create the new icons, but equally important were the technical tools that eased migration and contribution. From the ESLint auto-fixer to the Figma contribution plugin, having the right tools ensured the new system was adopted successfully. This reinforced that building a design system is as much about engineering and infrastructure as it is about pixels and aesthetics.
Centralize and support it well: Moving to a centralized icon repository worked because Atlassian also invested in the infrastructure and processes around it. By making the contribution process straightforward and providing visibility to all teams, they prevented the old chaos of scattered icons. Centralization only succeeds when you make it easy for everyone to do the right thing.
Maintain backwards compatibility: A lesson in change management giving teams a gradual migration path (like feature flags and the icon facade) was critical. Not every product team can switch over at the same time or pace, especially in a large organization. By ensuring the new icons could live alongside the old during a transition period, Atlassian allowed teams to migrate on their own schedules without breaking anything for users.
Clear naming and guidelines matter: A design system can scale to hundreds or thousands of elements, and keeping order is vital. The introduction of clear categories and consistent naming conventions has helped designers and developers pick the right icon and avoid misuse. Essentially, a bit of upfront clarity in how things are organized leads to a lot less confusion down the line.

Wrapping Up

Atlassian’s users are now experiencing a cleaner and more cohesive interface across products like Jira, Confluence, Trello, Focus, Talent, and various platform tools such as Atlas and Jira Product Discovery, with more products slated to adopt the new icons soon. The refreshed iconography system has made a visible impact: screens look more unified, icons complement the text and content rather than distract from it, and the overall user experience feels more polished and consistent. Internally, designers at Atlassian have been empowered by the new system they can rely on a robust set of icons that cover most needs, and when something new is needed, they have a clear path to contribute that icon for everyone’s benefit. The heavy lifting done on the automated migration and flagging tools paid off by allowing this large-scale change to reach customers faster than anyone initially expected.

Revamping core design elements like icons is never easy at an enterprise scale. It requires a balance of creative vision, detailed execution, and thoughtful change management. Atlassian’s approach focusing on simple, principled design improvements and backing them with strong technical support demonstrates how such a transformation can succeed. By building quality into the foundation and providing a smooth path for teams to adopt changes, they not only improved the interface for users but also made life easier for their own developers and designers working with the system.

Interested in learning more? Contact Atlas Bench to book a complimentary consultation with our Certified Atlassian Experts.

undefined

Atlas Bench is an Atlassian Platinum Solution Partner with deep Cloud Specialization, helping Data Center customers move beyond migration and fully transform on the Atlassian Cloud Platform. We deliver Atlassian’s System of Work end to end through four collections: Strategy, Teamwork, Service, and Software, connecting planning to execution, aligning teams around outcomes, modernizing service delivery, and accelerating software development.

We are also recognized as an Atlassian World Class Software Development Partner of the Year (Americas), and we bring AI leadership to every engagement. By leveraging Rovo for automation and purpose built agents, we reduce manual work, unlock knowledge across tools, and speed up decision making so organizations realize measurable value faster in cloud.

Behind the Screens: Building Atlassian’s New Icon System