Skip to content
CONVERSION7 min

The Icon System: Test, Ship, Compound

The icon is a prominent listing and category-carousel signal. Treat it as a measured system, not a one-off design decision.

// contents
  1. 01.What the icon does
  2. 02.The design system
  3. 03.The test loop
  4. 04.Recovery pattern
  5. 05.Common mistakes
01

What the icon does

First contact in search, category browse, editorial carousels, and OS-level widgets. Icon carries brand recognition, category legibility, and quality signalling in one 60px surface.

02

The design system

Category legibility first (users need to know what kind of app it is at 60px). Brand mark second. Colour system that survives dark/light OS backgrounds. No text (text vanishes at small size). Enough contrast to survive against category peers.

03

The test loop

Test a manageable set of variants through Apple's and Google's native tools. Define confidence, sample and duration thresholds before launch, then schedule future cycles around traffic and release capacity.

04

Recovery pattern

After a clearly harmful release, revert to the previous winner under the pre-agreed stop rule, then re-test with new variants.

05

Common mistakes

Redesigning around brand refresh rather than conversion signal. Testing icons on low-volume markets. Ignoring category-carousel legibility (the icon that wins in search may lose in a horizontal carousel). Overlapping icon tests with screenshot tests, impossible to attribute lift.

// next step

Want this applied to your app?

Request a free app audit
// ready to ship this?

Get an audit that lands actions, not slides.

Request a free app audit