While there are a number of iOS app icon templates for Photoshop on the web, including our own, I've yet to find a version for Sketch that completely meets my needs. Since I primarily work with Sketch at this point, I created a Sketch iOS app icon template for myself that we’re now ready to share with other Sketch designers. It takes advantage of Sketch's vectorized model and mobile-friendly tools to set it apart from Photoshop-based templates. This template also goes above other Sketch templates by providing time-saving Shared Styles as well as all the sizes you need for your app.
Why Sketch? #
Sketch is quickly being adopted by designers for application-focused work thanks to its vectorized model and interface focus. I’ve seen some significant improvements to the way I design mobile apps thanks to features like multi-resolution exporting, Shared Styles, and Symbols. For those interested, you can learn more about how as a Photoshop designer, I got started with Sketch.
This icon template takes advantage of the Sketch's exporting power and digital-optimized toolset as well as the vector aspect I relied on so much on in Adobe Illustrator. Sketch takes the best of Illustrator while being built specifically for user interface designers. This niche gives Sketch an advantage in web- and mobile-focused tasks.
What About Other Sketch Templates? #
Unlike other app icon templates for Sketch, our template offers all the sizes Apple requires in the iOS Human Interace Guidelines, including the new iPad Pro size. You’ll find @2x and @3x versions, options for Settings and Spotlight, and even resources for the Apple Watch. Our template is watermark-free with thin, design-friendly grid lines that don't require a special plugin.
Sketch's Shared Styles enable designers to assign colors, borders, shadows and other object and text styles, to keep these kinds of elements consistent. Our app icon template uses Shared Styles on the icon background to help save you time.
How to Use the Template #
When you start designing your app icon, make sure to design inside of the pink Symbol folder located in each Artboard since some icon sizes are used twice. If you do not design inside of the Symbol folder, you may not be able to see the mockup in the preview.
All assets have been designed at full size so you will not have to worry about half pixels from scaling. You can refer to the notes underneath each Artboard for what the size is and what it is being exported at. Make sure to turn off the included grid guidelines before exporting. Click File > Export to export all Artboards. If you only want to export certain Artboards, you can select them individually and then export.
Get the Sketch iOS App Icon Template #
A special thanks to our peer reviewers Harold Emsheimer and Christain Billings. To learn more about about the template, including example workflows, download our Sketch iOS app icon template. We look forward to your feedback and improving it over time. Follow us on Dribbble and Twitter for updates.
Join 20,000+ Other Readers
Sign up to be notified of new blog posts and be the first to receive helpful app goodies from Savvy.