Netflix's product iconography across their mobile, web, and tv platforms, as well as their studio products was in need of a revamp.
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.
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.
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.
From there, we examined opportunities for the cinemascope. These needed to be big brand moments, not functional icons like a minus.
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.
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.
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.)
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.
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.
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.
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.
We created a beautiful icon set that is consistent across platforms and sizes, creating brand consistency and value.
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.
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.
We thought this would take a year and she did it in a week.
Martin Bekerman, Product Brand Lead