I thought I’d share how to build the iOS Icon Grid by way of a simple animation. This is the same method that is described step-by-step in the book ‘Icon Design‘.

Phi – Golden Ratio

Phi (golden ratio) plays an important role in the iOS Icon Grid. The golden ratio is generated by using the Pentagon Progression.

In addition, the related proportion ‘√2’ (square root of two) is generated by using the Square Progression.

Icon Grid

Watch the whole video to see how easy it is to create this icon grid. I hope this animation provides you with some useful insights into Apple’s icon grid system, the role geometry plays in creating these grids, and the Golden Ratio.

The animation is the best way to see how easy it is to use simple geometry to create icon grids. You don’t need to do any calculations. By using a combination of squares, circles, pentagons and hexagons, you can create a range of useful icon grids, just like this one for other iOS icons, tvOS icons, Mac OS icons and Watch OS icons. You can also use a compass and straight edge to replicate the steps in the video. These icon grids form part of a grid system.

iOS Weather Icon & Grid

Here is a similar animation showing how to build the iOS 7 Weather Icon using circles, pentagons and the golden ratio.

 

Instagram

Design By Geometry is now on Instagram. This is where I am placing icon and logo designs on a regular bases. Keep an eye out for my next post here where I will feature some of these new designs.

Affinity Designer

I now use Affinity Designer for a lot of my work. The grid below, which is the basis for the animation was designed with Instagram’s requirements in mind. That is, the grid is set to 1000 x 1000 pixels on a canvas set to 1080 pixels by 1080 pixels. The golden ratio was used to resize the grid for presenting smaller icons and logos.

iOS Icon Grid Template

iOS Icon Grid Template

While it looks complex, each grid is grouped and can be hidden from view. There are a number geometric progressions that are not displayed above.

Example

The following picture is of an eagle that was proportioned using the grid. Originally hand drawn on a regular grid, I used the golden ratio to set the relationship between the width of the lines and the space between the lines.

Eagle and Icon Grid

Eagle and Icon Grid

 

Tagged on:                 

3 thoughts on “How to Build Apple’s iOS Icon Grid

  • March 18, 2021 at 6:34 pm
    Permalink

    Hmm, except that Apple seems to use a ratio of about 1.634345 instead of the usual 1.618034 for the golden ratio?

    Reply
    • March 18, 2021 at 7:29 pm
      Permalink

      My current best match for Apple is with phi = 1.627406

      Reply
    • March 18, 2021 at 8:54 pm
      Permalink

      Thank you TH for asking.

      Apple’s icons do correlate with a number of ratios; not just the golden ratio.

      Apple’s iOS icon grid expresses two distinct ratios as a result of its geometric construction; one is the golden ratio (1.618… : 1) and the other is the root-two ratio (1.4142… : 1)

      The proportions used in many of Apple’s icons depends on the symmetry system of what is depicted.

      For icons based on 3-fold symmetry like the system preferences icon, the root-three ratio (1.732… : 1) correlates well. The iOS weather icon correlates perfectly with the pentagon progression. The pentagon progression expresses the golden ratio many times over.

      Apple appears to combine ratios as evidenced by their icon grid. The thing to remember is the iOS icon grid is not the grid system that Jonathan Ives spoke about when he introduced iOS 7, it’s just one manifestation of the grid system.

      Do you have an example of the ratio you mentioned that correlates with an Apple design?

      Reply

Leave a Reply

Your email address will not be published.

%d bloggers like this: