top of page

Icon Creation Toolkit.

Scaling icon quality through tooling, not gatekeeping.

icon.png

The Challenge.

As Moonpig’s product ecosystem expanded, icons were being created by multiple teams to support new features and campaigns.

 

While this increased delivery speed, it also introduced inconsistency in visual style and accessibility.

​

As the sole designer on the design system team, I identified a key risk:
Icon quality was dependent on individual judgement rather than shared constraints.

​

There was no clear, scalable guidance for:

  • How icons should be constructed,

  • Which visual rules mattered most,

  • How new icons should be added without eroding system consistency.

​

The challenge was to enable teams to create new icons independently, while preserving a cohesive visual language.

Screenshot 2026-01-17 at 4.37.38 pm.png

Design Strategy.

Rather than centralising icon creation or enforcing heavy approval processes, I focused on encoding design decisions directly into a Figma-based toolkit.

​

The goal was to:

  • Make the “right” decisions the easiest ones to make,

  • Reduce subjective interpretation of icon style,

  • Support quality at scale without becoming a bottleneck,

  • Treat icons as a system, not a collection of assets.

​

This approach allowed consistency to scale beyond a single designer or team.

Screenshot 2026-01-17 at 4.37.17 pm.png

Structure & Content.

The icon toolkit was designed as a guided, end-to-end resource covering both principles and execution. Each section was deliberately lightweight and immediately usable.​

​

Core sections included:

  • Principles of icon design: A shared set of foundational rules defining clarity and simplicity. Aligning icon craft with brand tone and usability goals.

​

  • The base grid: A standardised grid system defining icon proportions and optical balance across sizes.

​

  • Safe space: Clear spacing rules to ensure icons remained legible and visually balanced when placed alongside text or other UI elements.

​

  • Key shapes: A controlled set of geometric primitives to ensure icons felt cohesive and intentionally designed as a family.

​

  • Strokes: Defined stroke weights and alignment rules to maintain visual consistency and accessibility across different icon sizes.

​

  • Corners & angles: Constraints around corner radii and angles to eliminate subtle inconsistencies that compound at scale.

​​

  • Icon styles: Clear guidance on supported styles, ensuring teams didn’t unintentionally introduce visual drift.

​

Each section included annotated examples and practical Figma assets, allowing designers to learn by doing rather than reading documentation.

Screenshot 2026-01-17 at 4.37.31 pm.png

Collaboration & Rollout.

Although I was the only designer on the system team, I worked closely with product designers to validate the toolkit against real use cases.

​

The toolkit was:

  • Shared as the default starting point for new icons,

  • Used during design critiques to align on quality,

  • Referenced in onboarding for new designers.

​

By embedding guidance directly into Figma, adoption happened naturally without requiring training sessions or ongoing enforcement.

Screenshot 2026-01-17 at 4.37.24 pm.png

The Solution:

The toolkit enabled the team to scale icon creation safely and confidently:

  • Improved visual consistency across products,

  • Reduced rework caused by misaligned icon styles,

  • Faster creation of new icons without system drift,

  • Less reliance on a single system designer for quality control.

​

Most importantly, it shifted icon creation from an ad-hoc activity into a shared, system-led practice.

bottom of page