Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

uxdesign.cc – User Experience Design — Medium | Michael Spiegel
Two years ago, I had a grand total of zero minutes played in Sketch. Today — let’s do the math — I have approximately 18 months in Sketch x 172 working hours per month, equalling 3,132 hours. In that time I’ve discovered the best solution for tedious icon creation problems that zap your time.
In the past, designers spent countless hours creating many colors and sizes for the same icon. Anywhere you make a change, you have to apply that change across the board. That said, designers are getting smarter about efficiency. At Mesosphere, we have one of the best icon editing solutions available. Our solution is completely customizable and eliminates repetitive work flow.
Creating a Design UI Kit for your team is fun to make, efficient, customizable, and understood by all team members. Here are the steps.
You have a set of icon symbols made by someone awesome (in our case John Ashenden). Likely they are flat, one color icons. We have two tones: our primary color at 100% opacity and at 30% opacity, respectively labeled “shape-primary” (100%) and “shape-secondary” (30%). You can use any arrangement of colors your little heart desires.
Sample set of icons from our library. Some are single color, some are multi-color. They are all symbols.
Create a symbol for each color in your palette. Below is a snapshot of some of our colors, including hover, active, and outline states. These color symbols have additional applications elsewhere in our UI Kit, making them increasingly useful and important.
Sample set of our color palette.
Note: If you make the color symbols the same size as the icon symbols (i.e. 16 x 16), the overrides will display all your icons and colors in the dropdown. No bueno!
Now, you should have a symbol for all your icons and all your colors. The next few steps are pretty simple. But, you need to rinse and repeat for each icon in your library. In the long run, this is way better.
Note: You can use any color symbol, i.e. “fill/red” or “fill/green,” and name your layer accordingly. All you’re doing here is placing the symbol to allow for color overrides. By using primary, you’re establishing the main use case.
Extra Credit: Be considerate of your layer naming as it has an impact on your overrides in the final step. I like the arrows to serve as an indicator that this color override applies to the icon above.
GIF of the layer setup for an icon symbol.
You’re all setup. You can apply this icon in any way you see fit. Below are a few samples using the same symbol (Button/Icon) and the overrides in order to create the desired result. No more multiple colors for each icon. No more multiple sizes. Just, efficiency and creativity.
Changing the colors and icons in action on the fly. Pretty slick! Notice I have a background fill for the icon button you can remove or change to whatever you want. In the buttons on the bottom left the icon fills are white and the button background changes.
Creating symbols the right way. You’ll learn how we approached complex symbol creation to fit our way of working.
Dynamic Icons in Sketch was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community