tl;dr

tl;dr

tl;dr

Building an icon system that scale

Iconography has always played a key role in defining Back Market’s brand identity. Every visual element we incorporate into our products, from icons to illustrations, aims to make the user’s journey more enjoyable and intuitive. Managing a cohesive icon system across five platforms with 20+ contributing designers presented a unique challenge. Here's how we transformed our icon design system from a bottleneck into a scalable, automated process that increased designer contribution by 220%.

Year

2024

Role

Design System, Design Ops, Product Management

Working with icons seems straightforward until you need to maintain consistency at scale. At Back Market, we faced three critical issues:

  1. Limited Access: Only a few designers had Adobe Illustrator access to design new icons, creating a bottleneck

  2. Time-Intensive Process: Multiple manual tasks slowed down contributions significantly

  3. Inconsistency: Manual processes led to naming inconsistencies and platform drift

Three pink line-art icons on a deep burgundy background with design grid markers. Features a headset with microphone for customer support, a double-outlined heart for favorites, and a heart with pulse line representing health or vitality.
Three pink line-art icons on a deep burgundy background with design grid markers. Features a headset with microphone for customer support, a double-outlined heart for favorites, and a heart with pulse line representing health or vitality.
Three pink line-art icons on a deep burgundy background with design grid markers. Features a headset with microphone for customer support, a double-outlined heart for favorites, and a heart with pulse line representing health or vitality.
Back Market product page showing an iPhone 12 Pro Max with a 4.5/5 star rating and delivery options. The right side displays part of an icon library, showcasing the connection between product displays and design system elements.
Back Market product page showing an iPhone 12 Pro Max with a 4.5/5 star rating and delivery options. The right side displays part of an icon library, showcasing the connection between product displays and design system elements.
Back Market product page showing an iPhone 12 Pro Max with a 4.5/5 star rating and delivery options. The right side displays part of an icon library, showcasing the connection between product displays and design system elements.

We created an automated icon delivery process leveraging Figma's API and our design tokens infrastructure. This new system streamlines the journey from icon creation to platform delivery, while maintaining optimal performance. By incorporating SVGo in our tech stack, we automatically optimize all icons exported from Figma, achieving file sizes comparable to our previous Illustrator workflow.

Workflow diagram showing the 'before' state of Back Market's icon creation process. The blue flowchart details the complex, multi-platform icon implementation requiring Illustrator design, SVG export, and separate processes for web, iOS, Android, and documentation.
Icon contribution steps before the automations.
Workflow diagram showing the 'before' state of Back Market's icon creation process. The blue flowchart details the complex, multi-platform icon implementation requiring Illustrator design, SVG export, and separate processes for web, iOS, Android, and documentation.
Icon contribution steps before the automations.
Workflow diagram showing the 'before' state of Back Market's icon creation process. The blue flowchart details the complex, multi-platform icon implementation requiring Illustrator design, SVG export, and separate processes for web, iOS, Android, and documentation.
Icon contribution steps before the automations.

The impact of this new system was both immediate and measurable, with designer participation soaring to 80%. The streamlined process reduced average contribution time to just 3 days, while quality improvements led to a significant decrease in icon-related tickets from 16 to 24. These metrics demonstrate how removing technical barriers and automating processes can dramatically improve both team engagement and output quality.

Streamlined 'after' workflow diagram on a dark green background showing Back Market's improved icon process. The simplified flow moves from user request to Figma design, branch merging, SVG export through API, SVGo optimization, QA, and automated delivery to all platforms.
Icon contribution steps after the automations.
Streamlined 'after' workflow diagram on a dark green background showing Back Market's improved icon process. The simplified flow moves from user request to Figma design, branch merging, SVG export through API, SVGo optimization, QA, and automated delivery to all platforms.
Icon contribution steps after the automations.
Streamlined 'after' workflow diagram on a dark green background showing Back Market's improved icon process. The simplified flow moves from user request to Figma design, branch merging, SVG export through API, SVGo optimization, QA, and automated delivery to all platforms.
Icon contribution steps after the automations.

200%

increase in designer contributions

90%

reduction in average contribution lead time

94%

reduction of the number of ticket in the backlog

The automation didn't just improve our processes—it transformed how our team approaches icon design. We've seen a 200% increase in new icon requests, indicating that designers feel more empowered to create custom and creative solutions for their projects.

Set of minimalist purple line icons on a dark purple background, arranged in a grid layout. Icons represent various UI functions including globe, verification, media controls, and e-commerce elements, showcasing the consistent design language.
A selection of icons created in the last few months.
Set of minimalist purple line icons on a dark purple background, arranged in a grid layout. Icons represent various UI functions including globe, verification, media controls, and e-commerce elements, showcasing the consistent design language.
A selection of icons created in the last few months.
Set of minimalist purple line icons on a dark purple background, arranged in a grid layout. Icons represent various UI functions including globe, verification, media controls, and e-commerce elements, showcasing the consistent design language.
A selection of icons created in the last few months.

To learn more about our icon design guidelines and how we enabled our designers to master icon creation, read Théau Menard's article:

How icons can be designed by (almost) anyone.

See More

See More

v1.2

© 2025

v1.2

© 2025

v1.2

© 2025