Nokia Icon Library
The brief
Working closely with Nokia’s Human Interface Design team, we were appointed to execute a 300+ icon suite and icon guidelines system for Nokia Health. We developed an icon style that reflects Nokia's ‘Pure’ brand value, contributing towards a RedDot Award and Good Design Awards in 2018.
Setting the ground rules
To maintain a unified look and feel throughout the whole set we knew it was important to set out some basic rules, not necessarily to always follow, but act as a guide to encourage consistency. We went with rounded corners inline with Nokia's physical product design, and gaps to indicate the overlapping of elements within the icons
Visual consistency
One of the main challenges we found when designing iconography was to maintain a visual balance, both in terms of sizing and complexity, across the full set. Referencing a grid system, we also made a number of alterations once we could see the full set together. We continually removed unnecessary elements wherever possible.
Variable stroke width
When designing the activity icons we found one of our initial rules for maintaining a single stroke width was difficult to stick to without the icons looking stickman-like and the equipment looking too chunky. We settled on a variable stroke width which allowed greater flexibility while still feeling consistent with the set.
Pixelated for low-resolution
Our next step was to adapt the icons to work on a super low-resolution screen included in the Nokia watch. The icons needed to be no taller than 26px which mean't that they all had to be redrawn with square pixels focusing on the most important elements of the icon to maintain consistency with the original set.
Marketing & in-app usage
The final icons were used throughout the promotional materials for Nokia's digital health products, as well as within the Healthmate app. This is where the relevance of designing a scalable set of icons really came into play as the icons needed to be used at many different sizes while maintaining legibility.
0
Unique icons
0
Sets of icons
0
Mediums
Exploring responsive scale and style
Designing a responsive icon library requires careful scaling. As the size increases, details like colour and design elements can be added to enhance recognition while maintaining clarity. This approach ensures that each icon adapts smoothly across different devices and can also be used in different contexts.
Let’s work together
→ Say hello →