iOS icon corner radii

Note: this is an older post and as such is a little out of date. Apple's corner radius mechanism uses Squircles which can be replicated in software such as Sketch. Best way is not make the radius part of your design, and not worry about it!

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.

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 x 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:

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!