The iPhone and iPad Icon Mask is Not Round; But it is Curved
Chris Heath 
A study into the curve that Apple uses for its icons.
When it comes to designing launch icons for the iPhone or iPad, the single-most biggest problem faced by designers is replicating the curve of the icon mask. What? You’re thinking? Surely you can use a pair of compasses to round off the corners. It certainly would make things easier if that was the case. The problem is the curvature of all the points that make up the corners of the icon mask do not share the same radius.
Trying to draw a line of best fit using bezier curves is really tricky. Sure you can get pretty close, but it always looks slightly off and uncomfortable to the trained eye.
Like Apple’s iPhone and iPad icon grid, I assumed that the corner curve of the icon mask would just as easily be generated using geometry.
The curve of the icon mask looked similar to the curved corner on my iMac, iBook, iPad and Apple TV. Others have already made this observation in relation to the Apple TV and Mac Mini.
And the curve on my iMac always reminded me of a hyperbola.
The hyperbola is the curve that you see everyday in your home, but never really notice. When a cone of light casts a curve on the wall, this curve is a hyperbola.
In the photograph above, the curves cast onto the wall by the circular rim of the glass lampshade are hyperbolic curves.
Lights certainly do cast beautiful hyperbolic curves, and for this reason, it’s easy to understand why Apple may be using them. Then again, it may be another conic section at play here.
Conic Sections
The hyperbola is one of four conic sections. The conic sections above are:
- circle (upper-left).
Where the horizontal orange plane intersects the cone, the line of intersection on the plane is a circle. - ellipse (lower left).
Where the angled blue plane intersects the cone as shown, the line of intersection traced on the plane is an ellipse. - hyperbola (upper and lower right).
Where the vertical purple plane intersects both cones, the lines of intersection on the plane are hyperbolas. - parabola (lower-right).
Where the angled yellow plane intersects the cone as shown, the line of intersection on the plane is a parabola.
iOS & iPadOS Icon Mask – Parabolic and Hyperbolic Drawing Methods
Using the methods outlined in the book ‘Geometrical Drawing for Art Students’ by I.H. Morris, I tried to see if a parabola or hyperbola would fit the bill. According to Morris, the curve of a parabola is traced when a point moves so that its distance from the focus (F) always equals its distance from the fixed line called the directrix (DD below). The hyperbola is traced when a point moves so that its distance from the focus is always greater, in a constant ratio, than its distance from the directrix.
Note: It’s out of print, however, you may be able to pick up an old copy of Morris’s book at your local second-hand book shop or online. My copy was published in 1935.
The two drawings on the left (above) show the application of Morris: ‘Problem 263.— To draw a parabola, the focus and directrix being given.’
The drawings on the right (above) show the application of Morris: ‘Problem 270.— To describe the curve of a hyperbola, the focus, directrix, and vertex being given…’.
In this case the resultant curves appear identical (Is this an Aha! moment or a Doh! moment?). I guess this has to do with the right-angled corner of the icon, which means the resultant curve is more likely to be an ellipse.
iOS Icon Mask – Method for Drawing an Ellipse
My next attempt was to create an ellipse generated from two circles centred on one of the iOS grid intersections. Morris provides many methods for constructing an ellipse. For this I followed: ‘Problem 257 – To describe an ellipse, the major and minor axes being given. Fifth Method.’
I had to fudge things a bit because I did not know the length of the minor axis. Using CAD software, it was easy to nudge the minor axis until the ellipse was tangent to the sides of the icon mask. Again, this method seemed to create a similar curve to the iOS icon mask. I drew more ellipses, each one larger than the other. It didn’t seem to make any difference to the shape or size of the curve that makes up the corner of the mask.
All these methods were producing the same curve. There were some differences, but these differences were likely to arise from my blunt drawing techniques.
Why Bother?
Given that Apple applies the mask to the icons, why bother trying to work out what the curve of the icon mask is?
Well, it’s to solve a problem for designers who want to inset a smaller curve within the icon mask. There are so many icons that have an inset curve that just looks awkward and out of place. Once you have a method for generating the curve, it’s easy to inset an equally elegant smaller curve.
So do any of these curves match up with the curve of the iOS icon mask? At first glance, they seem pretty close. Unfortunately, without access to a high-resolution version of Apple’s icon mask, it is difficult to verify. By enlarging an icon, the antialiasing makes the edge difficult to discern.
One check I did perform was to overlay Mike Swanson’s mask. It’s a very rough check using the low resolution image from his website, but it’s also a quick way of seeing if the above geometrical methods are out-of whack. Mike’s mask (blue shape) is derived using a genetic algorithm. The overlaid ellipses certainly don’t look out of place.
Mike kindly sent me a high-resolution version of his mask. It turned out not to be an exact match (see below), but it was similar. Mike did say that his script was derived from testing a small icon (which is the only ‘official’ mask that Apple provides), and that when scaled up, errors (if any) would be magnified.
With no official high-resolution mask, there is no way of confirming the accuracy of any curve derived from conic sections, genetic algorithms, or otherwise.
The following images shows the closest curve that I have come up with so far…
If I come across another other potentially useful method, I’ll let you know.
If you are going to give any of these geometric methods a go, the one thing you may need as a starting point is a geometrically derived iOS icon grid. To build your own geometrically derived iOS icon grid (and a couple of Mac OS grids), you can follow the step-by-step procedures in my book ‘Icon Design’. Icon Design is available on Apple Books.
Good Luck.
Categories: Design Graphics, Golden Ratio, Icon Design