Designing a unified icon system at scale
Role
Solo designer, design systems team (with engineering partnership)
Scope
A 700+ branded icon library replacing fragmented sourcing, design principles for consistency, self-service contribution process
Impact
Brand expression in the smallest moments
Source
Overview
The product's icons came from two disconnected sources: a third-party icon library, and one-off icons designed in-house whenever the third-party set didn't have the right metaphor for what the team needed. Over time this created a system with no single visual language. Icons varied in stroke weight, geometry, and style depending on where they came from, and there was no clear process for adding new ones. Anyone who needed an icon that didn't already exist had to track down a designer to create a one-off.
Goals
Replace the mixed 3rd-party/in-house icons with a single, cohesive library
Reduce redundancy by consolidating icons that represented the same or overlapping metaphors
Make sure the switch didn't disrupt users, especially for icons used in navigation and wayfinding
Build a sustainable process so the library could grow without bottlenecking on a designer
Designing the library
I created a set of style principles for the library to keep the style consistent when new icons are added, established a consistent naming convention, and guidance on how/when an icon should be used. The stroke weight of 1.5px was chosen to be the same visual weight of the text used in buttons, this created a visual balance when icons were paired with labels. I created an 2 styles for each icon outline which is the standard use for all icons and a solid to be used to show state.
Auditing and mapping
I inventoried every icon in use across the product and mapped each one to its replacement in the new library. Along the way, I identified places where multiple icons were being used to represent the same metaphor causing inconsistencies in the UI and increasing the mental load of a user trying to identify the icon.
Validating the highest-risk icons
Not all icons carry equal risk. The icons used for primary navigation and wayfinding are the ones users rely on to orient themselves in the product, so a change there has outsized potential to disrupt existing muscle memory. I ran user testing focused specifically on those icons to confirm that swapping them for the new metaphors didn't hurt users' ability to navigate the app before rolling the full library out.
Building a self-service contribution pipeline
Replacing the existing icons solved the immediate problem, but not the underlying one: there was still no good way to add new icons without a designer manually handing files to an engineer. Working with engineering support, I helped set up a process where a new icon added to the library is automatically detected, exported in the format the codebase needs, published to the design system documentation site, and opened as a pull request to add it in code all with no manual hand-off between design and engineering required.
Previous project
Seeds components
Next project
Responsive layout