Icons
The problem
SafetyCulture’s icon library was bloated, containing hundreds of icons that weren’t relevant to the product, and also consisted of various duplicates. This led to designers experiencing frustrations with using the icon library.
My role
I had just joined the Design System team and was tasked with revamping the icon library by collaborating with the lead product designer.
Process
I conducted an icon audit across the entire platform to understand most commonly used icons and record discrepancies.
I also interviewed designers and engineers to understand pain points.
Findings
Inconsistent icon usage across platforms
There was significant variation in iconography across product areas and platforms (iOS, Android, and Web), leading to visual inconsistency in the user experience.
Redundant and confusing icon variants
A single term could return up to ten similar results, making selection inefficient and error-prone for designers and engineers.
Irrelevant icons within the library
A lot of icons in the library weren't even relevant. Some icons fell into the food and lifestyle, and there is no scenario where these icons are needed (we are a workplace operations product).
Naming discrepancies between design and code
Icon names in Figma did not consistently match those in the codebase, creating friction during handoff and thus causing incorrect icons being used in production.
Examples of discrepancies
Examples of food and lifestyle icons
Results
1,000+
icons
→
icons
How we got here
Removed the no-brainer icons
Deprecated very low usage icons based on Figma analytics and also icons that did not exist in code.
Validated high-usage icons
For frequently used icons, collaborated with the broader product design team to gather feedback and align on the most effective, standardised options.
Unified naming conventions
Established a consistent, objective naming system (e.g. arrow-left instead of back) to ensure clarity and parity between design and engineering.
Introduced contribution guidelines
Encouraged intentional contribution to the library by requiring designers to first validate whether existing icons meet their needs, and if not, pair with the design system team to add new icons.
