iOS icon corner radii

02 May 2012

When designing app icons for iOS it’s useful to know the corner radius for each size to preview it correctly – even though the exported png needs to have sharp corners. This is why I include the radius size on the Icon Reference Chart and a mask layer on the OS Illustrator Template.

Screenshot of the iOS4 template

These sizes are rounded up to the nearest pixel though, and when David Barnard of AppCubby consulted Louie Mantia (former Apple, Square, and Iconfactory designer) he found the true sizes

Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 × 114 gives 20, which is the proper radius for a 114px icon). Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii.

This means that the correct radius measurements are as follows:

Icon512.png 512px 89.825
Icon.png 57px – 10
Icon@2x.png 114px 20
Icon-72.png 72px 12.632
Icon-72@2x.png 144px 25.263
Icon-Small.png 29px 5.088
Icon-Small@2x.png 58px 10.175

If your design doesn’t have any visual elements that follow or echo the corner radius, then you can safely ignore these measurements, and I would normally do just that. Occasionally though, you may find that the right solution requires it, and therefore the more accurate may be useful. Icons like Camera Genius use the corner radius as part of the design:

Obviously, at a pixel level, the difference really is minute, but may be just enough to make it feel as if it’s not sitting right:

Compare the 2 corners in this image, and you can see that it is different. I created this in Illustrator, which does allow you to use radii with a decimal point – your mileage in other apps may vary. For now I’m not sure if adding these to the Icon Handbooks iOS Reference Chart is over-complicating matters – I’d love to know your thoughts via Twitter!

Recent Posts

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Instagram Hickstagram

  • 21 Oct 2018

    Inktober Day 21, another bird (sorry @hicksmade)! This is the Snipe that I watched from the hide at Rusty Common on Friday. Lovely birds with beaks that defy the body they’re attached to. #inktober #inktober2018 #leighandjondoinktober #snipe

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

  • 16 Oct 2018

    Inktober day 16 “The Pilot” - a response to @hicksmade’s barber shop poster. Experimenting with a different style on this one #inktober #inktober2018 #leighandjondoinktober #pilot

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom