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.

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.

beforeAndAfteriOS 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 7 OCD 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, visit the iOS 7 OCD app icon template page. It’s a free resource which is hosted on GitHub. We look forward to your feedback and improving it over time.