Fitness Icons

Freeletics

Grid of 16 black and white fitness icons

How might we create a unified family of fitness icons?

Company
Freeletics
Date
2021
Platform
Design systems
Role
Design lead
Responsibilities
Competitive analysis, visual design, project management
Team
1 designer

Not only were we looking at revamping the entire look and feel of our product, but we also wanted to address problems with our icon family. For starters, there wasn't really even a family! 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:

1. Create a unified library and single source of truth for the Freeletics icons
2. Reflect the Visual Refresh design language
Example of 3 different running icons used throughout the training experience
Example of the three different running icons used throughout the training experience
Research

Gathering inspiration from well-known brands

Icons are a highly individualized Brand artifact. They are a graphic representation of many visual design properties in one small glyph, and each company and brand has a unique approach. Because of this, I took a look at about a dozen fitness, wellness, and health apps and websites to see what kinds of concepts were represented as icons, and also, what kind of visual elements were carried throughout the icon families.

After collecting screenshots and adding my own commentary, I got together with the UX team to conduct a dot-voting exercise. I wanted to see what worked well and resonated with the team. Peloton and Nike gathered the most votes, which is not surprising.

Research from Direct competitors (Nike, Peloton, Beach Body, Sweat) // Related Industry (MyFitnessPal, Apple Activity, Fitbit) // Best in Class (Care/of, Airbnb, Framer web, Uber, Dropbox)
Research from Direct competitors (Nike, Peloton, Beach Body, Sweat) // Related Industry (MyFitnessPal, Apple Activity, Fitbit) // Best in Class (Care/of, Airbnb, Framer web, Uber, Dropbox)
Workshop
No items found.
Sketch & wireframe
No items found.
Design

Iterating on the details

We landed on a visual direction pretty quickly, but still went through rounds of feedback and testing in context. The working visual principles were:

  • No more italic style
  • Use opacity instead of shape outlines
  • Too much hexagon - stop using that shape for everything
  • 24px grid with 2px padding
  • Angled terminals and squared corners
  • 2px line weight
  • Shape cutouts where possible
Layout of two sets of icons in a grid. One set is white on a black background, the other set is black on a white background.
Early version of the icons put together for design critique
No items found.
Test
No items found.
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.
Results

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 the form of a Figma Library (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