IconIQ: finding and understanding the icons in a design system
More than 2,000 icons were hard to find because the library was organized by name. I added a semantic layer so designers could also search by meaning and context of use.
- Role
- UX Designer & Qualitative Analyst
- Team
- Design System Team
- Duration
- 3 months
- Client
- Enterprise Client (Freelance)
The project in one minute
The Challenge
The library had grown through local ownership and local naming. Many icons had no shared semantic description, and design and development had no simple way to see what already existed and how it was used.
My contribution
- Conducted quantitative audit of 2,056 icons across all business lines
- Led interviews with designers and developers
- Designed Duality Game exercise to uncover priority mismatches
Results and scope
2,056 icons indexed with semantic meanings
The Challenge
What I was responsible for
- Conducted quantitative audit of 2,056 icons across all business lines
- Led interviews with designers and developers
- Designed Duality Game exercise to uncover priority mismatches
- Performed competitive analysis of leading design systems
- Architected semantic search and information architecture
- Designed the system designers use to propose new meanings
- Integrated AI/ML visual similarity features
The library had grown through local ownership and local naming. Many icons had no shared semantic description, and design and development had no simple way to see what already existed and how it was used.
The library held 2,056 icons spread across several business lines. The number mattered less than another fact: to find an icon, you often had to already know the name it had been saved under.
So I separated each asset's technical name from the concepts it could be used for. The mapping served search and browsing first, and later also fed the automated similarity features.
"A designer might know they needed an icon for 'refresh' without knowing the asset was called 'rotate-clockwise'. Text search didn't help there, which left visual browsing or asking a colleague."
Poor discoverability slowed work down and made it easier to pick different assets for similar cases. The problem was as much about design system consistency as about search.
The same intended uses were scattered under different names, some icons got duplicated, and knowledge of the library depended heavily on individual people's experience.
Research
Quantitative audit
55 alphanumeric icons
Mixed with unrelated icons, creating navigation confusion
431 specific to one business line
Siloed icons that were potentially reusable across organization
127 pairs of semantic overlaps
Same meaning represented by different icons across products
~800 without a clear category
Icons lost in the system due to organization by business line rather than meaning
Interviews with designers and developers
"When there's no shared guidelines, icon effectiveness depends entirely on individual designer sensitivity."
— Design System Developer
Nobody was responsible for what icons meant
Nobody decided what an icon meant. Icons were created as needed: when a designer needed one, they made one without checking whether something similar already existed.
Finding an icon took too long
Visual browsing took 5-10 minutes per icon. Text search returned nothing. Designers asked colleagues on Slack, and some checked the developer library hoping it was better organized.
Designers weren't sure of their choices
Designers weren't sure the icons they chose matched how the rest of the company used them, and 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
Analysis of other systems
The most complete systems offer several ways to search
The most complete systems combine search, browsing and visual similarity, because a single way of searching doesn't suit everyone.
Semantic depth varies a lot between systems
Material uses categories and tags but has little semantic depth. Fluent has rich keyword tags but no visual similarity. Carbon has a clear structure, but icons are hard to find in it.
Key Insights
Icons are easier to find by appearance than by meaning
The gap between how designers think ('I need something for refresh') and how icons are named ('rotate-clockwise') makes every search hard work.
Without shared meanings, everyone reads icons their own way
Without documented meanings every designer interprets icons differently, and the same icon ends up used in different ways across products.
Not everyone searches the same way
Some designers search by word, others browse categories, others scroll through previews. The system had to support all three.
The same icon changes meaning with context
The same icon can mean 'refresh' in one context and 'undo' in another. So I didn't use rigid definitions: an icon can have several meanings, tied to context.
A lot of knowledge lived only in the team's memory
Designers know how icons are used in their products, but this knowledge stays in their heads instead of the system.
Goals & Principles
Search icons by meaning
Find an icon by meaning as well as by name. Typing 'refresh' finds 'rotate-clockwise' through semantic relationships.
Make the relationships between meanings explicit
Write down meanings and descriptions that until then existed only in people's heads.
Offer several ways to reach the same icon
Support different ways of searching: text search, browsing by category and AI-based visual similarity.
Use the same language across design and development
Show clearly what is available and where, with direct Figma links and usage examples.
Guiding Principles
Several paths to the same icon
Search, categories and similarity lead to the same icon from different ways of working.
Meaning changes over time
Meanings change with use, so the system has to allow adding new ones and correcting them over time.
Meaning depends on context
Show how icons are actually used in products rather than imposing rigid, abstract definitions.
Solution Design
Interactive diagram
Find an icon by what it means
Select a node to highlight its connections and read the design decision behind it.
“Email”
The designer starts from an intention. Searching for “email” should also reach an icon named “envelope”.
Connected to: Meaning · Visual similarity
Conceptual search paths from the case study. No live search or ranking is performed.
Search by meaning
Text search didn't work: searching 'refresh' returned nothing because the icon was called 'rotate-clockwise'.
Alternatives considered
- Improve naming conventions (doesn't solve mental model gap)
- Add manual tags to every icon (labor-intensive, incomplete coverage)
- Build a layer of meanings attached to icons (flexible, scalable)
I built a semantic layer in which every icon has several documented meanings. Search recognizes synonyms and related concepts.
Typing 'refresh' finds 'rotate-clockwise' (through its attached meanings); typing 'mail' finds 'envelope', 'at-sign' and 'send' (related concepts). Filtering updates in real time with a 300ms debounce, and the search stays in the URL so it can be shared.
Trade-off: Documenting 892 meanings took substantial upfront work, and user contributions need moderating over time. Every other feature rests on this layer, though.
Several ways to find an icon
Different designers think differently: some search, others browse, others scan visually. No single method serves everyone.
Alternatives considered
- Text search only (leaves out people who search by image)
- Browse-only categories (slow for targeted needs)
- Hybrid approach with multiple methods
I implemented three ways of searching in parallel: (1) semantic search for people who know what they want, (2) category browsing reorganized by concept instead of origin, (3) AI-based visual similarity using the CLIP model.
I redesigned the category architecture around concepts instead of the business lines icons came from. Accordion navigation shows how many icons each category holds. The CLIP model finds visually similar icons a designer might miss and groups related ones (all arrows, all checkmarks).
Trade-off: The AI integration added technical complexity and interface surface. In return, finding an icon became much easier for every kind of user.
Designer contributions with moderation
Knowledge of how icons were used lived in designers' heads and not in the system, and a single team of curators couldn't collect all of it.
Alternatives considered
- Top-down expert curation only
- Fully open wiki-style editing
- Moderated contribution system
I created a simple form where designers propose new meanings with a description. A moderated approval flow checks quality and lets the library grow.
Contributions come from the people who use the icons every day. Each designer can submit a meaning, a description and their name. Moderation keeps things consistent, and usage examples from real products add context.
Trade-off: Moderation takes work and contributions can be uneven. Collecting the knowledge scattered across the team still proved more useful than centralized control.
Outcomes & Impact
892 meanings were documented across 2,056 icons. That semantic layer made it possible to search by intended use, and it also gave structured data to the later similarity and relationship features.
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 starting from what they want to communicate, even without knowing the name
More confidence in choosing icons consistent with how other products use them
Through AI similarity, designers discover icons they didn't know existed
Knowledge that used to live only in people's heads is now written into the system
Fewer duplicate icons, because existing ones are easier to find
More consistency across products thanks to shared meanings
What I delivered
- Semantic search interface with 300ms real-time filtering
- 892 documented semantic meanings across 2,056 icons
- AI-powered visual similarity using CLIP model
- Redesigned category information architecture
- User contribution system with moderation workflow
- Rich icon detail pages with usage examples and relationships
- URL-based sharing system for individual icons
Reflections
The initial manual mapping was expensive, but it created a base the automated features built later could reuse.
What I would change
- Would have explored ML similarity from the start rather than adding it later in the process
- Would have tracked searches and collected usage data from day one, to see how use changed over time
- Should have created automated semantic suggestion tools to accelerate initial meaning documentation
What worked and what was difficult
What Worked
Different methods answered different parts of the problem
The audit established scale and duplication; interviews showed how that structure failed in practice; competitive analysis helped separate conventions worth borrowing from assumptions specific to this organization.
Meaning had to remain contextual
A single icon can carry different meanings in different product contexts, so the system records more than one instead of assigning it a single interpretation.
The manual mapping also served the automated features
Manual semantic mapping was useful on its own for search and browsing, then became structured input for automated similarity and recommendation features.
Challenges
The first semantic mapping took a lot of manual work
Documenting meanings for more than 2,000 icons took a lot of upfront work. We started with the most-used 20% and extended coverage gradually, but the first phase took longer than expected.
Maintaining the taxonomy needed clear moderation rules
User contributions had to be reviewed to keep things consistent. Clear guidelines and community moderation solved it, but it needed ongoing attention.