Filed In: Design , iOS , Download

An iOS 7 App Icon Template for Obsessive Designers

Recently I was testing an app we're building that didn't have an app icon yet. I noticed that iOS 7 provided a new placeholder image. That placeholder just so happens to be a pixel perfect version of the new iOS 7 grid, finely tuned at every size. It wasn't until I saw this grid to scale—directly from Apple—on all my devices that I decided to create a template of my own that appealed to my obsessive nature.

Note: Please see the updated version of this template.

iOS 7 Icon Design

Before iOS 7, iOS app icons were like a handful of Chiclets, each one packed with lickable details (Steve jobs said it, not me). Today, each icon relies less on the actual shape of the icon and more on a singular element resting on a background. It's as if each app is now a brand and the app icon is the logo. This branded approach existed in previous versions of iOS, but now it’s the norm.

beforeAndAfter

iOS 7 has truly ushered in a new era of app icon design and it actually feels more like logo design. Let's look at some of the details about iOS 7 app icons, including the dimensions, corner radius, and grid.

Dimensions

We have our own ideas on why Apple changed the dimensions of iOS app icons but it's undeniable that iOS 7 was the perfect chance to tidy up some numbers and unify app icons across their suite of handheld devices. Check out Ivo Mynttinen's iOS Cheat Sheet for an updated list of required app icon sizes.

Corner Radius & Grid

appIconGridScreenshots

Prior to iOS 7, the corner of each icon was a perfect circular radius, easily recreated by most graphics programs. iOS 7 uses a new technique to round the corners, resulting in what's being called a super ellipse or squircle. So far the most accurate recreation of this shape is the one used in our template—created using Mike Swanson’s handy rounded rectangle Photoshop script.

iOS 7 OCD App Icon Template

ios7OcdAppIconTemplate Most iOS app icon templates start out with designing at 1024×1024 and use a single smart object that is then scaled to every size needed. With this approach, it's quite difficult to gain context for each size. More importantly, there's no way to tweak the app icons for various devices.

The iOS 7OCD app icon template is different than others in the fact that each app icon is its own independent smart object. This allows you to design your app icons at the exact sizes that they'll be used. Another huge difference in our template is that the grid is uniquely crafted for each app icon. Thus, yielding pixel perfect values at every size.

Since our template uses independent smart objects we recommend starting with your flagship app icon (iPhone or iPad) and working out from there. You'll notice there are only shapes for circular grid elements but vertical and horizontal grid lines are present as Photoshop guides within each smart object. This is because shapes as guides are not ideal in pixel based programs.

Get the Template

To learn more about the template, including example workflows, download the iOS 7 OCD app icon template. It's a free resource which is hosted on Dropbox. We look forward to your feedback and improving it over time.

Courtney Starr

Courtney served as a mobile interface designer at Savvy Apps until November 2014.

You made it this far so...