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.
Why use this solution?
- Remove the need for colored versions of the same icon.
- Remove the need for varying sizes of the same icon.
- Use the Sketch overrides panel to change icons on the fly.
- Use Sketch overrides to change icon colors to show states, background colors, and ideate.
Creating a Design UI Kit for your team is fun to make, efficient, customizable, and understood by all team members. Here are the steps.
Step 1: Create Icon Symbols
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.
Step 2: Setup a Symbol Color Palette
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.
- For every color, make a symbol of the same size (I did 24 x 36 pixels). This will limit the number of colors listed in your overrides to those that match your specified size.
- In the Layer List of Sketch, make sure you arrange the symbols in an order that makes sense. This will clean up the overrides dropdown. Sadly, Sketch will still add some alphabetical nuances in the dropdown list — oh well. Regardless, it’s good practice to be vigilant with layer organization.
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!
Step 3: Setup the Icon Symbol
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.
- Insert symbol “fill/primary” (or whatever you named your primary color) on top of the “shape-primary” layer and use the shape as a mask for the color.
- If you’re using a second color, duplicate your color layer over top of “shape-secondary” and use that as a mask again. Continue as needed for every shape and color for your design.
- Apply 30% opacity to the secondary color symbol (if applicable).
- Remove all fills and styles from the shape layers.
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.
Step 4: Make it Happen
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.
Coming Soon
Creating symbols the right way. You’ll learn how we approached complex symbol creation to fit our way of working.