Crafting a custom icon language for a global brand

Lumosity is a brain-training platform with tens of millions of subscribers and a product library spanning over 40 games across web, iOS, and Android. At some point during our initiative to redesign the platform, the design team had to reckon with the fact that no existing icon set was ever going to fit a product this specific.

Why borrowed icons stop working

Every time the design team needed an icon, we reached for whatever set was closest. The result was a product UI assembled from mismatched visual vocabularies. Metaphors were duplicated and styles drifted and, ultimately, nothing felt like it belonged to the same system. The fix was not finding a better third-party set that had all of the required metaphors of the application, but to build one ourselves.

before — mixed weights & styling
after — uniform styling

Taking stock of what we were actually using

Before drawing anything, I inventoried every icon in use across the product. The goal was to see what we actually had in use and the requirements of the system: metaphors, duplicates, nouns, verbs, categories. Some icons were redundant, while others were functionally misaligned with what the UI was asking them to do. The audit produced a clear picture: here is what we keep, here is what we cut, here is what is missing.

side nav (before)
side nav (after)
utility nav (before)
utility nav (after)

A system rooted in the brand

I studied the Lumosity wordmark and typeface before committing to any parameters. The grid I landed on used a consistent stroke weight with a deliberate mix of rounded and capped stroke endings, a detail invisible at a glance but felt across the whole set. I also extracted a specific diagonal angle from the Lumosity logo mark and built it into the grid. Icons live on the grid when the form allows it. When a slanted element appears, that same angle shows up again, a quiet thread connecting the icon system back to the brand it belongs to.

More than 80 icons with one visual voice

The first iteration was the delivery of over 80 icons, all in one outlined style, sized at 32px in SVG format, with back-up PNGs if needed. Fill variants were added selectively as use cases required them. As a proof of concept I Included four unique game glyphs that were simplified, single-color symbols that could be paired with their respective game, distinct from the game's full-color illustration assets. This gave the set a character and whimsy that no off-the-shelf library could replicate. The set was adopted immediately by both design and engineering and can be seen being used in the most recent updates to the platform.

Previous Next