Category
Design System · Icon Library
Year
2023
IFEMA Madrid:
Icon Library
The icon library redesign was part of a broader design system redesign for IFEMA Madrid, one of Europe's largest trade fair and congress organizers. As Visual & UI Designer at Garaje de Ideas, I led this piece of the project: over 200 icons across basic and illustrative variants, with full construction documentation to keep the library consistent as the system continued to grow.
Mapping the Icon Library
The first step was mapping the full state of the existing icon library, icon by icon, to understand what already existed and how it was actually being used across the product. That mapping is where the pain points emerged, they weren't a starting brief, they were findings. Icons had been added inconsistently over time, whenever an existing one couldn't represent a new concept, without following a unified construction system.
Three issues surfaced from the audit: inconsistency in style and size, no systemization across the library, and no documentation to guide future icon creation.
The first step was mapping the full state of the existing icon library, icon by icon, to understand what already existed and how it was actually being used across the product. That mapping is where the pain points emerged, they weren't a starting brief, they were findings. Icons had been added inconsistently over time, whenever an existing one couldn't represent a new concept, without following a unified construction system.
Three issues surfaced from the audit: inconsistency in style and size, no systemization across the library, and no documentation to guide future icon creation.
Design Decisions
Once the full library was mapped, the project moved into the design phase: establishing new construction rules that would keep the library consistent and scalable going forward, instead of growing ad hoc the way it had before. That meant defining a two-tier icon system, a strict construction grid with documented specs, a consistent color language for the illustrative set, and dark/light compatibility rules, covered one at a time below.
Once the full library was mapped, the project moved into the design phase: establishing new construction rules that would keep the library consistent and scalable going forward, instead of growing ad hoc the way it had before. That meant defining a two-tier icon system, a strict construction grid with documented specs, a consistent color language for the illustrative set, and dark/light compatibility rules, covered one at a time below.
Two-Tier Icon System
The solution established two distinct icon types. Basic icons, constructed with minimal strokes for maximum readability, are mandatory for functional UI contexts. Illustrative icons add organic color shapes derived from circles, layered over the basic structure for expressive, decorative contexts.
The solution established two distinct icon types. Basic icons, constructed with minimal strokes for maximum readability, are mandatory for functional UI contexts. Illustrative icons add organic color shapes derived from circles, layered over the basic structure for expressive, decorative contexts.
Construction Grid & Specs
Every icon is built on a strict grid system: 16px and 24px for basic icons, 32px and 40px for illustrative. Stroke weight, isolation area, and construction area are all documented. Junction points use a 3px border radius on 16px grids and 6px on 32px grids, decisions that ensure visual consistency at every size.
Every icon is built on a strict grid system: 16px and 24px for basic icons, 32px and 40px for illustrative. Stroke weight, isolation area, and construction area are all documented. Junction points use a 3px border radius on 16px grids and 6px on 32px grids, decisions that ensure visual consistency at every size.
Organic Color Language
The illustrative icons use color shapes that are always derived from the circle, never geometric fills. This creates a cohesive, playful layer that feels consistent across 200+ icons while allowing flexibility in expression.
The illustrative icons use color shapes that are always derived from the circle, never geometric fills. This creates a cohesive, playful layer that feels consistent across 200+ icons while allowing flexibility in expression.
Dark & Light Compatibility
Every icon was tested on dark and light backgrounds, always prioritizing maximum legibility. The base icon library originates from IFEMA Madrid's existing system and was extended while maintaining backward compatibility.
Every icon was tested on dark and light backgrounds, always prioritizing maximum legibility. The base icon library originates from IFEMA Madrid's existing system and was extended while maintaining backward compatibility.
Outcome
Results:
200+ icons documented across basic and illustrative variants
Full construction specs from 16px to 48px, ready for the team to extend independently
Adopted into production on select pages; full rollout continued after my role on the project ended.
200+ icons documented across basic and illustrative variants
Full construction specs from 16px to 48px, ready for the team to extend independently
Adopted into production on select pages; full rollout continued after my role on the project ended.