Creating an icon library
By: Ryan Smith
Tags: Design Thinking, Icons, Design Process, Design, Fintech

[Optional geek out session]

The key to making 1.5px stroke weights work is to use the pixel grid lines for stroke alignment, instead of aligning edges of shapes to the pixel grid. Placing line segments and points directly on the grid allows for the distribution of the 1.5px stroke to be equally shared, centered in the span of 2px. In other words, instead of having 1 full pixel and 1 half-full pixel (which results in a light grey blurry effect when rendered) we would split the half-full pixel between the 2px span, making each side of the line segment .75px. Because this can be confusing, and you’ll probably never really grasp what I’m talking about without a visual reference, you can see examples of pixel previews for each scenario below.

Stroke details

Other stroke details we considered were the treatments for caps and corners. We decided to use square stroke caps flush with the edge of a line segment, also called butt caps in Illustrator. We also toggled align stroke to center and miter join for corners. The butt caps give us more precision and less blur for edges, and the miter join allows us to customize strokes using the transform tool with more control.

Corner radius

Rather than relying on the preset algorithm the out-of-box rounded corners effect offers in stroke settings, we defined our own. Rounded corners are set up to be 0.5px, Illustrator settings shown below. This allows for a square counter shape (negative space) and a rounded edge, for a subtle roundedness that echoes our buttons. We edit the corners as the final production pass since it can be somewhat redundant if still being generative in construction.

Arrow vertices

Arrows, chevrons, reset, and other icons using directional shapes use sharp pointed directional vertices. This detail helps reinforce the sentiment of precision to our developer audience, and is more closely related to the Plaid logo. Demonstrations shown below

Exporting

For best results while exporting, we used the export for screens option and unchecked the create subfolders checkbox to keep our library flat. Artboard grid alignment and the invisible icon-container layer play a critical role in ensuring intended positioning for the exported assets. If your assets export 1px larger than intended, it is likely because the artboard is not aligned to the pixel grid, or not positioned on a whole x or y coordinate value.

Phase 4: Organize

With the construction and production details in place we moved on to flesh out the next major pieces critical in creating a salable icon library; organization. In these regards, we’ll focus on nomenclature and mapping, specifically. While this section might not seem as sexy at the surface, organization is what unlocks adoption of the system we as designers work so hard in perfecting. Without thoughtful consideration in organization at Plaid, we could have ended up with some of the same problems we had sought out to solve.

Nomenclature

Nomenclature and organization go hand in hand. Really, how we name things is a key piece in any design and development collaboration, and icons are no exception. We consulted our development partners early on, since they would be implementing the icon system in our React component library for web based experiences, as well as iOS and Android for mobile experiences.

Together, we chose to name icons based on what they are rather than what they represent. For example, instead of naming the representation of a list used for transactions transactions , we name it list . This allows list to be more versatile, possibly used to represent a table, a list, or a transaction. If we find that we need more distinctive representation we can create more specificity in the art and name as needed.

With that being said, we’ve also made judgement calls for more ubiquitous icons. We decided using search and close would be simpler and more discoverable than magnifying-glass or x . While the logic can be somewhat blurry, shared consensus across teams is more important than striving for bulletproof theory. Ensure you’re aligned with dev partners by sharing libraries in dev tools like Storybook.

At Plaid we use lowercase letters and hyphens for all imagery (illustrations, icons, photos) in our design system. The hyphen may be used for names with more than one word or for variations. Some examples:

icon/arrow-left

icon/arrow-right

icon/bar-graph

icon/sidebar-hide

icon/sidebar-show

icon/trash

While this works for us, it’s not more or less valid than other ways of naming. Different platforms may require different conventions, and so we have to give in to the demands of the system requirements in iOS, Android, and React within their respected repositories.

To serve all platforms, you can either duplicate, batch rename, and re-export within Figma, or create scripts to get a similar result if you’re more technical. Because that’s not my expertise, and a bit of a rabbit hole, I’ll just end this section by acknowledging potential paths and leave it to my more savvy sidekicks to cover in a future post.

Mapping

Our icon library artwork originated in Illustrator, stored with an exported asset repository on Dropbox, was imported to our shared Sketch Cloud Icon Library, documented in Zeroheight + Storybook, added to our React component library, included in our iOS and Android development kits, and has since been migrated to our Threads Foundations design system in Figma –deep breath– all within the past several months.

This isn’t to say that every team could or should put their icons through this kind of tour, but making an icon library available for designers and engineers in the exact structures they require is bound to cause some dizziness, especially at a fast paced company. Setting up your icons to nimbly adapt and scale in multiple environments is the key to a successful icon library.

Below is a map of the current (transitional) state of our icon organization. Compare that to the map of our ideal state, where we are heading.