Case study
Consolidating icons across design systems to increase consistency
Icon naming framework and taxonomy
Overtime, teams using the Meta design system had developed their own style of iconography, and with it, a wide variety of naming conventions. This lead to many duplicative icons, and additional work for our visual design team. We decided to consolidate all of the Meta-led icon libraries into one, and institute a new, literal naming structure with associated keywords to reduce duplication and make it easier for designers across the company to find the icon then needed quickly.
At a glanceGoal
Combine multiple icon libraries from across Meta products into one library with consistent naming and design.
Challenges
- Each icon library had its own naming conventions
- Each library was owned by a visual systems team that felt strongly about ownership
- Designers had developed shortcuts to deal with using multiple libraries
Solution
Create naming framework and process that makes it easy for Meta visual design team to consolidate and manage existing icons, and for designers to find and reuse icons instead of creating duplicates.
Impact
- Applied to 6 existing icon libraries, eliminating 256 duplicates
- Reduced visual design team intake by 20%
Audit current libraries
Identify gaps and overlaps
Create naming formula
Use "literal naming convention to make icons as extensible as possible
Build template for library
Require designers to include alt text and searchable keywords to make icons accessible and reusable.
Define exceptions
Allow for flexibility where it makes sense.
One centralized icon library and creating a solid framework that allows teams to quickly spin up new icons when needed, but reducing the need for duplication.