An icon system fit for the big screen

Netflix

Services

Design Systems ❋ Iconography ❋ Illustration ❋ Product Design

Team

Josh Mateo ❋ Martin Bekerman ❋ Indya McGuffin ❋ Naoufal Kadhom ❋ Studio Koto

Project

Netflix's product iconography across their mobile, web, and tv platforms, as well as their studio products was in need of a revamp.

Where I came in

The Brand Product team at Netflix had been working with Studio Koto, a design agency, to refresh their iconography. When I joined the Design Systems team, Brand Product moved the work to me. I started with a small selection of icons made by the Koto folks, as well as some guidelines. My job was to take their inspiration and take it to the next level, from an art direction standpoint and as the person executing the library in the new style. I took Koto's work and furthered the guidelines to be more practical for a large library that could more easily be maintained by the Design Systems team.

Icons at Netflix are used tens of thousands of times a week, so this project has enormous reach.

Principles

There are two foundational design attributes I applied to these product icons: cinematic and focused. The cinematic ratio and cinemascope concepts were developed by the product brand team and Studio Koto. The focus concept is mine.

The cinematic ratio: giving our icons a widescreen aspect ratio
The cinemascope: integrating the curve in the Netflix logo
Inspired by our screens, focus tells us when edges should be sharp or soft.

Applying the system

We decided to work with a 2px stroke for the majority of our icons. Because of restrictions for how TVs process images, we needed to make sure all our lines would be on whole pixels whenever possible. Adapting iconography to the cinematic ratio begins with defining our boundaries.

Using an anamorphic ratio
Top: original icon set
Bottom: new icon set

From there, we examined opportunities for the cinemascope. These needed to be big brand moments, not functional icons like a minus.

The cinemascope is thoughtfully applied to horizontal lines.
Outer corners are always soft. Inner shapes and corners and sharp.
Icons have square end caps.
Left: old mobile UI
Right: new mobile UI

Building the full system

Our system went through 6 rounds of revisions. We examined naming, principles, categorization, variants, and stroke weight. I started with our 24x24 icons, since that's what the current library contained.

A snapshot of every round before the final round.

Above are all the 24x24 icons, including around 80 completely new icons that I built between February and April 2021.

From there, I built every icon at 3 more sizes: 16x16 (with a 1.5px stroke), 36x36, and 48x48. These are the core sizes which are used by the mobile/tablet, web, and studio teams, as well as brand product.

Sizing for all our non-tv icons
Stroke variety for 16px icons

I organized them into 15 categories based on icon function. I started with IBM Carbon's icon categorization and then fine-tuned for Netflix's purposes, adding categories like "Film" and "Environment". To view the full suite, scroll of the bottom of this case study. (It is a lot of icons.)

The complexities of television

These icons aren't quite the full story, though. Because the TV team works with very specific size requirements, we also shipped a 18x18 version of all the icons used by the TV team (around 50 icons). Our engineering team created an API that resizes the core sizes, and adds the appropriate padding to help create icons for alternate resolutions for TV. From there, I also built another selection of sizes based on TV ratio needs. That work is also below due to the sheer volume.

Creating a sustainable request system

It isn't enough to build an amazing iconography system. We need to create sustainable processes that encourage the health of the system. I conducted qualitative research sessions with designers across the company to understand their process for getting new icons, so that we could all start working in the same structure.

Research Notes

After conducting my interviews, I analyzed all the processes folks had gone through into flowcharts so that I could better explain how everything had been working for the past 7 years at Netflix.

I then created a flow system with the help of our ops manager to help create an intake system that then also examines patterns and platforms, so that no one gets left out when something new is made.

The new process for icon creation

Success of the project

Efficiency

By creating an intake flow, we were able to get people more icons, more quickly. Adding me as a specialist allowed us to ship icons in as little as 20 minutes.

Consistency

We created a beautiful icon set that is consistent across platforms and sizes, creating brand consistency and value.

Relief

By taking the icon creation process off the plates of individual designers, it allowed them to focus on their projects, as well as work with us to develop the best possible icons for tests and live products.

Overall

This icon system is world-class. I took 20 icons made by an agency and developed them into an enormous multi-platform system that will stand the test of time while providing a more cinematic experience within the product.

Icon Appendix


We thought this would take a year and she did it in a week.

Martin Bekerman, Product Brand Lead