Custom Icons
Our legacy icons came from an IcoMoon library that converted designs into an icon font for developers to use. Over time, however, this approach caused issues with token swapping, sizing, and overall appearance, leading to numerous visual artifacts in the product. Many early designs also hard-coded icons, which made swapping to new versions particularly difficult.
With a background in semantic design, once we transitioned to SVG, I hand-designed a minimal, bold icon set with accessibility in mind, using an icon grid to ensure pixel-perfect readability.
The result enabled developers to swap color tokens and instances more effectively using an interchangeable library of 16, 20, and 24 px icons.
Many icons, specifically navigation icons, had a “filled” state to make it clear that the icon was interacted with or is active.
Once the icon set was finalized, I worked with the lead mobile designer to create a GitHub script that allowed us to generate and add new icons without developer intervention. This enabled us to add new icons and adjust or update existing ones without requiring developers to do any manual work.