Fitness Icons

Freeletics

Grid of 16 black and white fitness icons

How might we create a unified family of fitness icons?

Client
Context

Not only were we looking at revamping the entire look and feel of our product with the Visual Refresh project, but we also wanted to address problems with our icon family. For starters, there wasn't even a family of icons! Designers would copy and paste icons from different files without any link to a primary component. This was a big issue for maintaining design consistency across the app and web. Further, the current set of icons were a collection of random glyphs - from Noun Project redesigns to in-house creations to freelancer contributions - with no real cohesion. So, the two major goals of this Visual-Refresh-related- project were:

Goals

1. Create a unified library and single source of truth for the Freeletics icons
  • Up until this point, any sort of unified icon library had not existed. Designers would copy and paste icon glyphs from project to project.
2. Reflect the Visual Refresh design language
  • Not only did we need a full icon set, but the style of the existing icons needed to update to be more inline with the brand style.
Example of the three different running icons used throughout the training experience

Example of the three different running icons used throughout the training experience

Responsibilities

Contributing designer to Design Systems

Proactively designing and seeking feedback

Since this was a self-initiated project, I worked hard to proactively seek feedback and make critical decisions about the designs to move forward.

Ensuring adoption

To ensure the teams used these new icons, I created an icon component library and merged all of the icons with the existing Figma components. This helped smooth the adoption process and make it much easier to integrate the new icons into current designs.

Advocating for design tokens

Not only were the icons merged into the Figma component libraries, we also merged them into our design tokens. With significant helps from the developers, I worked to ensure the web and native platforms adopted the use of design tokens. This helped us build a more consistent product with significantly less design debt.

Solution

Sporty & robust

The Freeletics icon family reflects the sport-focused brand. I wanted to focus on unique details that align nicely with the brand personality, as well as stand out from the crowded fitness space. Our Hexagon was the main inspiration for the angle, treatment, and direction of each glyph.

No items found.
Impact

A new & unified icon family

For the first time in its history, Freeletics has a global icon set to use across all touch-points. Further, the design team now has a single source of truth to access all the icons in a global library file (and through design tokens). This helps unify our designs with the same set of icons, increasing our brand equity.

This project started as a side project because I noticed the team needed an icon set, but it turned into a critical part of the overall visual refresh for Freeletics. I'm super proud of where we've been able to take the brand!

Download the app today

More projects