iRacing Icon Library

How It All Started

After a few years of using our existing icon pack, I got a little too curious and started poking around…

Shortly after transitioning to UX at iRacing, I identified several issues with our icon library. Many of the icons had been created years apart, leading to inconsistencies in grid systems, geometries, and overall visual cohesion. This lack of consistency negatively impacted legibility, particularly when the icons were scaled down to smaller sizes. Upon further investigation, I found that the underlying SVG data was inconsistent and rather messy. As someone obsessed with craft and pixel peeping, something had to be done…

A New Approach: Grids & Optical Sizing

To address the variety of issues I uncovered, I researched icon construction and grid systems. I began by focusing on the worst offenders and gradually improved the entire icon pack. My new approach involved using a consistent set of grids and guides for creating and modifying icons.

As I progressed through the library, I also identified gaps in the set. What started as a pack of roughly 300 icons eventually grew well over 400, as I added missing variations and new designs to meet evolving needs.

Outcome: A More Cohesive and Optimized Icon Library

The updated icon library not only looks more cohesive, but it also performs better across various screen resolutions. The icons now scale effectively, maintaining legibility even at smaller sizes. Additionally, optimizing the geometry in the SVG paths slightly reduced file sizes, which contributed to faster load times—a miniscule but welcome improvement in performance.

While a new icon library might not drastically transform the overall user experience, it ensures that our iconography now aligns with the high standards we set for the rest of the product. It's a solid step in the right direction.