The icon pack effectively functioned as a “Frankenstein system”, where multiple generations of design coexisted without structure. Icons varied in style, proportions, and visual weight, and there was no grid, no shared rules, and no documentation.

This led to slow workflows, as both designers and developers struggled with finding, interpreting, and implementing icons consistently.

The product’s icon library had evolved organically over time and eventually turned into a fragmented and inconsistent system. It combined legacy mobile icons, web assets, and quick ad-hoc solutions created under time pressure. As a result, the icon pack lacked visual consistency, clear guidelines, and scalability.

With some available bandwidth alongside my core responsibilities, I proactively initiated a gradual redesign of the icon system, ensuring it did not interfere with ongoing product work.

I began by defining a clear visual direction, selecting a subset of icons that best represented the desired future style. To accelerate the process, I collaborated with Claude, using AI to analyze the existing library and extract patterns. This allowed me to quickly establish core principles for stroke, proportions, and visual balance.

Building on that, I developed a structured grid system, including a base grid, key shapes, safe areas, and proportional units. The system was tested across multiple icons and iterated until it became reliable and flexible enough to handle different cases.

During collaboration with engineers, it became clear that the product only required two icon sizes: 16px and 24px. The previously used 36px icons added unnecessary complexity and were rarely used, so I eliminated them to simplify both design and implementation.

I then redesigned around 90% of the icon set, focusing on achieving pixel precision, consistent visual weight, and clarity of metaphor. Since the product uses icon fonts, my work extended beyond design — I also prepared and exported the icons as a font, ensuring smooth integration into the development workflow.
At the same time, I introduced accessibility-aware parameters, making sure icons render correctly under different font scaling conditions.

An important part of the project was improving efficiency. I developed a streamlined Figma workflow, combining structured components and keyboard shortcuts to significantly speed up production.

This resulted in a process where a fully prepared icon — including clean vector output and embedded editable source — could be created in a matter of seconds, enabling both speed and maintainability.

To make the library truly usable, I restructured it entirely. I introduced a clear and scalable naming system and organized icons into logical groups, making navigation significantly faster.

The final system was not just a set of assets, but a well-documented and easy-to-use design resource for both designers and developers.

The project resulted in a redesigned icon system of 1085 icons, built on a consistent visual language and a scalable structure. Standardizing to 16px and 24px and removing unused 36px assets significantly simplified maintenance and implementation.

What was previously a fragmented collection became a cohesive design system component, improving both speed and clarity across design and development workflows. Icons are now easier to find, faster to use, and more predictable in implementation.

The updated system was well received by the team, especially given that the initiative had been postponed multiple times. More importantly, it established a reliable foundation for future scalability.

This project highlights my ability to identify systemic gaps and deliver end-to-end solutions that balance design quality, technical constraints, and team efficiency.