IconIQ: design system icon management
Building meaning infrastructure for a 2,000+ icon library: so designers find icons by what they mean, not what they're named
Case study
IconIQ: design system icon management
The Challenge
Within the organization, 2,056 icons were scattered across multiple business lines with 60%+ lacking semantic definitions. Zero semantic search capability meant only visual browsing was possible. This led to inconsistent usage across products, knowledge silos with icons trapped in specific business line folders, and a design-to-dev disconnect where it was unclear what's available in code vs Figma.
IconIQ is an intelligent icon search and management system I developed to solve a critical pain point in design systems: finding the right icon. What started as a simple search tool evolved into a comprehensive semantic intelligence platform that fundamentally changed how designers interact with a library of over 2,000 icons at a leading enterprise company.
The semantic mapping I did by hand IS the training data for the AI similarity features. Manual knowledge engineering and automated similarity are two layers of the same system: information architecture treated as an AI problem, where the quality of the semantic infrastructure determines the quality of everything built on top of it.
"Every designer knows this frustration: you need an icon for 'refresh,' but searching 'refresh' returns nothing because it's named 'rotate-clockwise.' You scroll through hundreds of icons, squinting at tiny previews, hoping to spot what you need. Designers wasted hours searching, created duplicate icons, and used inconsistent icons across products, weakening brand coherence."
"I spend time searching for the right icon, but without precise semantic indicators, I often need to confirm with someone else." - Cross-functional designer. The impact: wasted hours, duplicate icon creation, and inconsistent usage across products weakening brand coherence.
Designers spent 5-10 minutes per icon search through visual browsing. Text search failed completely: searching 'email' wouldn't find 'envelope.' Designers asked colleagues via Slack for icon recommendations. Some checked the developer library hoping for better organization.
Research
Quantitative Audit
55 Alphanumeric Icons
Mixed with unrelated icons, creating navigation confusion
431 Business Line Specific
Siloed icons that were potentially reusable across organization
127 Pairs of Semantic Overlaps
Same meaning represented by different icons across products
~800 Without Clear Category
Icons lost in the system due to organization by business line rather than meaning
User Interviews
"When there's no shared guidelines, icon effectiveness depends entirely on individual designer sensitivity."
— Design System Developer
The Ownership Void
No one owned semantic decisions. Icons were created reactively: when a designer needed one, they made one, without checking if something similar existed.
Search is Broken
Visual browsing took 5-10 minutes per icon. Text search failed. Designers asked colleagues via Slack. Some checked developer library hoping for better organization.
Semantic Insecurity
Designers lacked confidence their icon choices aligned with company-wide usage. They discovered inconsistencies only after launch.
"With tight deadlines, I sometimes settle for an icon that's 'close enough' just because I can find it."
— Cross-functional Designer
Competitive Analysis
Multiple Discovery Methods Work Best
The best systems provide search, browse, and visual similarity. No single approach serves all mental models.
Semantic Depth Varies
Material uses categories + tags but lacks semantic depth. Fluent has rich keyword tags but no visual similarity. Carbon has clear structure but poor discoverability.
Key Insights
Icons are findable by appearance, not meaning
The gap between how designers think ('I need something for refresh') and how icons are named ('rotate-clockwise') creates constant friction.
Semantic consistency requires semantic infrastructure
Without documented meanings, every designer interprets icons differently, leading to inconsistent usage across products.
Different users, different mental models
Some designers search, others browse categories, others scan visually. The system must support all three.
Context determines meaning
The same icon might mean 'refresh' in one context and 'undo' in another. Rigid definitions don't work; we need flexible, contextual semantics.
Knowledge exists but isn't captured
Designers know how icons are used in their products, but this knowledge stays in their heads instead of the system.
Goals & Principles
Enable semantic search
Find icons by meaning, not just name. Type 'refresh' and find 'rotate-clockwise' through semantic relationships.
Document semantic relationships
Make implicit knowledge explicit through structured semantic meanings and descriptions.
Support multiple discovery methods
Accommodate different mental models with search, browse by category, and AI-powered visual similarity.
Bridge design and development
Provide clear visibility of what's available where with direct Figma links and usage examples.
Guiding Principles
Redundancy serves users
Multiple paths to the same icon accommodate different ways of thinking and working.
Semantics are living
Meanings evolve through usage. The system must be flexible enough to grow organically.
Context over absolutes
Show how icons are actually used in products rather than imposing rigid, abstract definitions.
Solution Design
Smart Semantic Search
Text search was completely broken: searching 'refresh' returned nothing because icons were named 'rotate-clockwise.'
Built semantic meaning system where icons have multiple documented meanings. Search understands synonyms and related concepts through semantic relationships.
Search now understands meaning: Type 'refresh' → finds 'rotate-clockwise' (via semantic meanings). Type 'mail' → finds 'envelope', 'at-sign', 'send' (related concepts). Real-time filtering with 300ms debounce for instant feel. URL persistence for sharing.
Multi-Modal Discovery System
Different designers think differently: some search, others browse, others scan visually. No single method serves everyone.
Implemented three parallel discovery methods: (1) Semantic search for targeted finding, (2) Category browsing reorganized by concept not origin, (3) AI-powered visual similarity using CLIP model.
Category IA redesigned based on concept rather than business line origin. Accordion navigation with counts shows icon availability at a glance. CLIP model identifies visually similar icons that designers might miss. Groups related icons (all arrows, all checkmarks).
Contribution System for Living Knowledge
Designer knowledge about icon usage exists in their heads but isn't captured in the system. Centralized curation can't scale.
Created simple contribution form where designers suggest new meanings with descriptions. Moderated approval workflow ensures quality while enabling organic growth.
Knowledge grows from actual usage. Designers can contribute: meaning + description + their name. Moderation maintains consistency. Usage examples from actual products provide context.
Outcomes & Impact
2,056 icons indexed with semantic meanings
73% reduction in icon search time (from ~5 min to <1 min)
892 semantic meanings documented across all icons
~50 searches per day across design teams
127 semantic overlap pairs identified and documented
Designers find icons by how they think, not how they're named
Confidence in semantic consistency across product usage
Discovery of icons they didn't know existed through AI similarity
Captured institutional knowledge that was previously in people's heads
Reduced icon duplication through better discovery
Improved cross-product consistency with shared semantic language
Reflections
What Worked
Multiple Research Methods Revealed Complete Picture
Combining quantitative audit + interviews + competitive analysis revealed insights no single method would have found. The audit showed the scale, interviews revealed the human impact, competitive analysis provided validation.
Semantic Flexibility Matched Designer Thinking
Not forcing rigid definitions, letting meanings be contextual, matched how designers actually think. 'Star' can mean favorite, rating, achievement: all valid and context-dependent.
Progressive Enhancement Created Value Layers
Starting with basic search, then adding AI similarity, then contribution system: each layer added value without overwhelming. Users could benefit immediately while advanced features emerged organically.
Challenges
Initial Semantic Population Was Massive
Documenting meanings for 2,000+ icons required significant upfront effort. We started with the most-used 20% and grew organically, but initial population took longer than expected.
Moderation Overhead Required Clear Guidelines
User contributions needed review to maintain consistency. We solved this with clear contribution guidelines and community moderation, but it required ongoing attention.
Key Learnings
Information architecture is invisible but critical - How you organize determines what people can find
Redundancy isn't waste - Multiple paths to the same goal serves different mental models effectively
Crowdsourced knowledge works - With the right structure, users will contribute valuable context
Search is a design problem - Technical implementation matters less than understanding how users think
Semantics are living things - Meanings evolve with usage; systems must be flexible enough to grow
Manual semantics and AI features complement rather than replace each other - Hand-crafted meaning infrastructure becomes the training signal that makes automated similarity features work. The AI-everything narrative misses this; the real leverage is in the layer where human knowledge engineering feeds machine inference.