Managing Icons in Sketch 52
12 Days of Sketch | Day 11
Are you team Illustrator, or team Sketch? The best tool to create icons for app design is a frequently debated topic here at Atomic Robot. Whichever way you create your icons, all these tips still apply when cleaning them up to use in your app!
Steps to creating hassle-free icons in Sketch.
Use Even Pixels
Make sure your icons are designed on an even pixel grid. When designing for the digital world, an odd pixel may cause your icons to blur or get adjusted in ways you didn’t intend. Refer to Day 9 “Spacing Tips & Tricks” for a more detailed explanation of using grids.
Start Small
24x24 px in the mobile world, at least for now… is the standard icon size, so if you design your icons to fit well on a 24x24 px artboard that will already set you up for success in scaling and legibility on device.
Combine Shapes
Once the design is complete, similar to the Pathfinder panel in Illustrator, you can expand and combine your pieces into one single shape. This will help with the reusability of your icon set, allowing you to change color easily.
Combine shapes by selecting all expanded shapes, and tapping Union in the top panel of Sketch. There are also options to Subtract, Intersect, or get the difference of that selection.
Reusing Icons
Once the icon is created and simplified down to a single shape you can create a symbol of that icon, and add a layer style. This will allow you to change the color of the icon in the overrides panel, as well as swapping out the icon with another much easier. To learn more about symbols, you can refer to Day 5 “Symbol Tips and Tricks” for a more detailed explanation of setting up and using symbols effectively.
Summary
That’s it for today’s iconography tips and tricks!
If you enjoyed this article please give us a follow or some claps! Your support keeps us writing more content; feel free to DM us with content requests! Instagram Twitter Dribbble LinkedIn
We’re posting Sketch tips and tricks every Monday, Wednesday, and Friday until the holidays, so stay tuned for more tips and tricks!
Learn more about Atomic Robot.
