Part 1: The Journey to Icon Unification

Icons fail without an organized system.
And getting organized is a lot of work.

If you’ve ever worked on software or design in a large company, you know exactly what I’m talking about. If you don’t know what I’m talking about, I’ll explain part of the 6-year journey of how HP’s design system, Veneer, organized and unified the company’s iconography. In case you’re trying to unify iconography in your company or team, I hope our experience helps you navigate yours.

This articles covers:

• Some background
• Auditing hundreds of icons
• Settling a unified style
• Identifying sizing and usage
• Establishing icon principles

Background

Even if a company has the personnel and financial resources, commitment, and design maturity to build a cohesive iconography system, challenges affecting visual consistency still exist. These include evolving product needs, shifting brand expressions, siloed teams, and competing priorities. Siloed teams doing their best to address dynamic company-wide changes left room for a mixture of visual styles to emerge. Iconography wasn’t exempt.

In my experience, design system teams are often best suited to deal with these challenges.

Our work brought us in close collaboration with multiple projects across HP. As we collaborated with more teams across the company, inconsistencies became clearer: different icons for the same action, mismatched styles, and disconnected metaphors. Icons were quietly diverging in silos. As the design lead at the time, I saw an opportunity not just to improve icons, but to align the system behind them. The journey to iconography unification had begun!

Shall we vector in?

Auditing

We began with an audit. Much like a product UI audit, our iconography audit starts by collecting existing icons.

Our goal was to gather icons from every team, platform, or libraries we had access to. This step helps uncover inconsistencies, duplications, and disconnected visual styles. These were crucial signals that informed where our system needed work.

But wait! Only collecting icons isn’t enough. The most important information came from talking to the people behind the icons. I reached out to designers to ask the questions that icons alone couldn’t answer:

What is the environment and context the icon lives in? What technical constraints were you working with? What message were you trying to convey? Does your team have any icon creation guidelines?

That’s when the stories started rolling in. One team used mixed stroke weights to make sure an icon rendered properly on a low-resolution display. Another team had design debt and mixed styles like rounded and sharp corners because of a brand change mid-project. A team reused icons from another product because “they were already there and looked close enough.”

These weren’t careless decisions; they were shaped by context, which is common in large companies. Designers were working in silos, often without access to shared resources or visibility into what other teams were doing. Everyone was solving for their immediate needs. And without a centralized system to guide or connect those decisions, divergence was inevitable.

Three experiences from the audit taught us most of our lessons.

The first experience was auditing HP’s printer control panels. Some of these devices come with strict limitations such as small screens, grayscale displays, or low resolutions. So the team had been optimizing for clarity. Simple shapes, only necessary details, pixel-perfect alignment. It made sense: these were their requirements based on the technical limitations. So, we worked together to document what icon constraints were required for this context, like tighter pixel grid adherence and usage of simple shapes.

The second experience involved a product team with an established and visually mature icon style. Their icons looked great. But when I asked how they were created and maintained, things were not clear. They didn’t have shared documentation or clear icon guidelines. Multiple designers contributed over time, and without a clear systemized approach to designing icons, inconsistencies appeared. Line weights varied, and corner radii, line gaps, and intersections were not uniform. The product team initially resisted the idea of updating their icons — no one likes hearing their work needs to change — but after sharing a proof of concept and showing that visual consistency didn’t sacrifice meaning, we found common ground. The proof-of-concept strategy was a turning point to support the audit and getting buy-in later on.

The final audit experience, with the 3D printing team, posed some unique challenges. Their icons lived in two different places: digitally on user interfaces and physically printed on the hardware. Lined icons worked well in user interfaces, but weren’t legible enough on physical labels. Filled versions were essential in this case, not just for visibility, but to meet accessibility standards. On the production floor, icons were also displayed on large screens, showing printer and job status from a distance. Again, filled icons proved more effective for improved recognition. These conversations reminded me that icons need to be easy to understand and depend on context.

In every case, we had to look beyond the style. The audit was about listening, learning, and understanding how icons were doing their job, or falling short.

Through this process of collecting icons, we built an icon inventory, recognized common styles, better understood specific product needs, and identified gaps in the creation process. Clearing the path toward unifying HP iconography.

Below, I’ve outlined a few practical tips I found helpful while running an iconography audit at a large scale.

Andrei’s advice for an iconography audit

• Engage with leads: Talk with influential colleagues that are responsible for the product you are auditing to understand the icons’ context and constraints.
• Identify duplicates and variations: Find icons that serve similar purposes but differ in style, structure, or metaphor. These are your signals for where unification is needed.
• Understand processes: Gather information about icon documentation, such as technical guidelines, characteristics, and usage.
• Categorize icons: Create clear categories of icons based on medium (like digital or physical), application (product user interface, marketing materials, etc), and context (navigation, actions, status indicators, illustrative, etc).
• Look beyond visuals: Consider technical limitations, accessibility requirements, and user research insights that might affect icon design.
• Be curious, not critical: Easy to say, hard to do, but you’re not there to judge previous work. Behind every design there is a human being and a scenario that you are not completely familiar with.

Converging into a unified icon style

Once the icon landscape was mapped out and understood, the next step was to converge the ideas and find commonality or areas for all of us to improve. The audit revealed a wide range of styles including outlined, filled, rounded corners, sharp edges, mixed corners radii, various line weights, and subtle visual nuances.

The audit also told us that we needed to account for varying contexts and product requirements. Instead of locking HP into one single rigid style, we decided to design a flexible iconography system. This flexibility was needed to encompass HP’s diverse portfolio, usability and accessibility needs, and brand adherence.

HP’s product ecosystem spans software and hardware in both the consumer and enterprise spaces. That means icons don’t just live in one environment; they appear in control panels, dashboards, mobile apps, desktop software, and even physically printed on the hardware. Designing one single style would have been too restrictive and would never work. So we incorporated intentional variation: rounded and sharp shapes, lined and filled appearances, adaptable enough to serve different use cases while still having the unified style that makes it look part of the same family.

Usability and accessibility were critical drivers as well. Icons play a major role in signaling interaction states and guiding users through interfaces. We made filled variants standard for active or selected states, providing strong visual cues. In more expressive cases, such as warning messages or toast notifications, filled icons help convey urgency and draw attention where it’s needed most.

Finally, there was the company’s brand. HP’s identity has evolved over time, and iconography needs to reflect that evolution. Through rounds of testing and alignment with teams that we were partnering with, we found that lined icons with rounded corners best aligned with the visual tone of the brand. But we also recognized that certain product families, like gaming or commercial tools, could benefit from sharper, bolder expressions. We agreed that one style would not fit all, but we identified what would work for most teams and defined that as the default style.

By building flexibility into the core of HP iconography, we ensured that we could support different teams, Veneer user needs, and product contexts. And it meant the iconography system could adapt without losing cohesion.

Andrei’s advice for converging icon styles

• Create clear guidelines: Establish guidelines that help teams understand design decisions.
• Balance unity with flexibility: Define a default that works for most teams, but leave room for variation when it’s needed. Recognize different contexts and consider style variations (like rounded vs. sharp corners, lined vs. filled).
• Design for usability, not just aesthetics: Consider how icon states (like selected or active) will be communicated, and make usability part of your baseline
• Anchor your style in the brand: An icon style that aligns with brand identity reinforces recognition and trust across products.

Defining icon sizes and purpose

Once we landed on a unified style, the next big challenge was to define scale and purpose. One informed the other, as we learned.

Another takeaway from the audit informed us that one icon size doesn’t fit all scenarios. A 24-pixel icon inside a button in a dense UI is doing a very different job than a large icon printed on packaging or displayed in a marketing banner.

Thus, we identified and defined two primary categories where the icons were used according to their sizes: system icons and marketing icons.

• System icons are small, functional, and action-oriented, primarily used in user interfaces where clarity and simplicity are the priority. We designed these icons on a 24 by 24 pixel canvas and prioritized legibility. (We’ll explore technical guidelines for system icons further in an upcoming article.)
• Marketing icons are used in contexts like product packaging, promotional materials, and product landing pages. Usually, larger areas where icons can afford to be more detailed. We designed them on a 48 by 48 pixel base canvas, which allows space for richer visuals while still following the foundational principles and guidelines.

Some icons span both categories. From 16 pixels all the way to 48. Think of a “microphone” icon: it might appear in a button in a UI and also be used to highlight voice recognition features in product packaging. In these cases, we design the icons so the same concept can be expressed with different levels of visual detail, adapted to the context without losing its consistency, making sure they still fit as part of the same family.

It is important to note that not every single icon needed versions in both categories and had the full icon size range. A “share” icon, typically used in product UIs, might only exist as a system icon, while an icon highlighting a specific hardware feature such as “secondary touch display” might only be relevant in marketing contexts and doesn’t need a system version.

Clear categories made it easier to organize our library, define contribution guidelines, and distribute these assets to teams.

Andrei’s advice for defining size range and purpose

• Map use cases: Before jumping into design, understand where and how icons will be used.
• Respect the needs: Don’t force too much detail into small icons or over-simplify icons meant for larger applications.
• Prioritize icon shapes: You may not need a full size ramp for every single icon. Prioritize the icons based on usage and design for required sizes.
• Simplify: Ask yourself, what is the minimum amount of visual information needed to convey an idea.

Agreeing on icon principles

No matter how icons are used or their sizes, the guidelines and principles for making icons remained the same. Each icon, regardless of its size or purpose, still needed to follow the same principles. I’ll explain how we codified those principles.

Unifying the visual style of our icon system was one part of the challenge, but I also needed to unify the thinking behind it, so the same sprawling inconsistency didn’t continue. During the audit, I had compiled a list of design attributes that different teams were using to guide their icon work. Some had internal documentation, others relied on inherited or shared team knowledge, and a few didn’t have anything explicitly defined.

When we presented the compilation of this rationale to the teams, the meetings led to some great (and occasionally intense) discussions. I took the lead on aligning design principles across multiple teams, each with different product goals and team cultures. We reviewed audit findings, compared existing icon libraries, and surfaced each team’s current principles, sometimes documented, sometimes just siloed knowledge. It was not easy, but once we laid everything out, we noticed strong recurring attributes, such as clarity, simplicity, readability, and consistency.

After working through overlaps and edge cases, we landed on four principles that would guide the creation of the unified icon library from then on.

1. Intuitive
   Icons are easy to understand. They clearly convey intended metaphors and minimize cognitive effort. Icons with universally accepted meanings stay the same, adhering to established conventions. In other words, don’t reinvent well-established shapes.
2. Readable
   Icons use simple shapes. They use only the necessary elements and details to communicate the main idea quickly and efficiently. At all available sizes, icon features, line thickness, and internal spacing are properly balanced to provide clarity and scalability. Avoid combining multiple complex ideas into one single icon. Composed icons with secondary objects can be successful if the secondary object remains simple, following the principles.
3. Consistent
   Icons follow systematic rules. Veneer’s icons are part of a unified collection that follow a defined visual and structural style.
4. Personable
   Icons form empathetic connections. They reflect the personality of the brand, reinforcing its identity. Most icons should be pleasing to look at, and their personalities welcome and guide the user.

Andrei’s advice for defining icon principles

• Gather diverse input: Include teams from across the company to ensure the principles reflect shared needs.
• Make principles actionable: Turn abstract ideas like “clarity” into tangible criteria designers can follow. More about it in another article.
• Write it down: Document everything and make it accessible to everyone who needs them.
• Treat the principles as a living document: Principles should evolve alongside the products, the brand, and the teams using them.

Wrapping Up

Unifying HP’s icon system was a great initiative that I had the opportunity to lead, but I also learned a great lesson. This work taught me that unifying icons is not only about visuals: it involves a large amount of building alignment across teams, defining a shared foundation, and creating flexibility for the future.

Final takeaways:

• Start with an audit to understand what exists and why.
• Partner with key design leads and creative professionals.
• Define the icon principles and make sure they’re clear, practical, and inclusive.
• Design for flexibility, not just consistency.
• Treat it as a shared effort, not a solo mission.

The work doesn’t end here, but a strong foundation makes everything that follows easier. Check out Part 2: The technical foundations of Veneer’s iconography.

Author: Andrei Garcia
Co-author: Aaron Schmelzer
Illustrations: Natalie Metzger

How to make a cohesive icon library was originally published in HP Design on Medium, where people are continuing the conversation by highlighting and responding to this story.