Netflix
Netflix is a multimedia streaming company, producing original movies and tv shows viewable on dozens of devices. The team at Netflix needed another icon designer to assist them in production work on a large number of icons, which is where I came in.
Services
Icon Design • Automation
Team
Bonnie Kate Wolf, Sean Huntley
Dates
2023, February to May (3.5 months)
Website
TLDR;
In 3 and a half months, I did precise production icon work on over 3,600 icon assets, and used automation to quickly and precisely document changes, organize, and rename over 4,300 icons.
Why they brought me on
Netflix was combining their professional and customer-facing libraries into one, so it was an opportunity to re-evaluate the style and make changes. The edits were needed on 9 different sizes to support all their platforms, so they brought me on to get the job done in a short time-frame. The primary iconographer, Bonnie Kate Wolf, recommended me to the Netflix team.
Pixel pushing is more than a job… it’s a lifestyle
The first pass
This initial step was about making changes to existing icons. In some cases, we actually needed to do complete redesigns on icons, such as these here.
“Make the broom bigger!”
Bringing in the macros
One of the challenges with this project was the sheer scale. Just in the default sizes, we were working with over 1900 individual icon assets. We needed to organize each category alphabetically, rename each icon with the correct file path (so they would always export to the same place), and unify the parts of each icon into a single path.
Holy cow! Now take this and double it, and that’s how many assets we were working with
Macros significantly decreased the amount of time required to do many of those tasks. For example, every time that we needed to rename an icon, we needed to give it this syntax:
category-name / icon-name / icon-name-with-size
Using Regular Expressions, I developed a macro that was able to retrieve the size of an icon, then dynamically rename it based on a prompt. This way, I could easily rename each icon with confidence that it would be correct. Not only did it speed up the renaming process, but it also reduced human error.
First they’ll be renaming icons, next they’ll be sentient AI conquering the universe
Extending into the TV sizes
After I had made all the edits on the default sizes (16px, 24px, 36px, and 48px), we needed to recreate the TV sizes, which required a series of adjustments:
• Increase the padding by 2 at each size
• Scale the frame by 150%
• Adjust the stroke weights
• Add “@1080p” to 4 of the 5 sizes
I built a macro that automated these steps, which at scale saved nearly a week’s worth of work. Here is one of the macros at work, which combined keyboard strokes with a Figma plugin to add padding to the frames.
As they say… work smarter, not harder, right?
Each size had to be individually carefully crafted, like 2415 Karens ordering custom drinks at a Starbucks
Each icon needed to be adjusted to the new grid of the rescaled size. I worked through 2415 individual icon assets, aligning their paths to the grid, using macros and plugins to rename and reorganize, and making design decisions as I went along.
Excelling at automating spreadsheets
In addition to the icon work, I also created a macro that populated a spreadsheet used by the developers. The dev team needed to know which icons were being renamed, which categories they belonged, and which sizes had been edited.
Using the color coding system and Regular Expressions, I built a macro that retrieved information like the name, category, sizing, and whether or not it had been edited, then using that info to populate the spreadsheet fields. This saved countless hours of inputting that information manually, which also would have been prone to human error.
You could say I excel at building time-saving macros
Conclusion
In 3 and a half months, I did precise production icon work on over 3,600 icon assets, and used automation to quickly and precisely document changes, organize, and rename over 4,300 icons. This was a great project for me to build macros and find patterns.
If you have a project that could use this level of precision at scale, then reach out! I’d love to collaborate and problem solve with you.
Want to read more?
I like to write about icon design, so if you'd like to learn more about my craft and my process, check out my articles section. If you want to see more of my work, then click on one of my other case studies. If you're interested in working together, then contact me and we'll get started!