What do the rectangles, squares and circles exactly represent on icon guidelines like this one?

(I numbered them for practicality)

enter image description here

source : https://developer.android.com/google-play/resources/icon-design-specifications

1 Answer 1


That spec is IMHO extremely clear about the intent and usage of the keylines:

Icon artwork can populate the entire asset space, or you can design and position artwork elements such as logos onto the keyline grid. When placing your artwork, use keylines as a guideline, not a hard rule.


After the asset is uploaded, Google Play dynamically applies the rounded mask and shadow to ensure consistency across all app/game icons.

To me it seems abundantly clear that Google's intent is to help you, as a developer, develop an icon or logo which will fit into their new "uniformed shapes" Google Play icon scheme, which they are enacting to get away from what has been a visually cluttered user experience.

They ask you to develop either a logo / icon using those keylines such that there is "white space" (which can be coloured) around the primary logo / icon to give a balanced, easy-to-parse silhouette to the final Google Play icon, after their internal graphic logic engine does its thing: you deliver artwork in a 512 x 512 square, it radiuses the edges, and creates the external drop-shadow on the fly.

They ask you to try to match Google Materials guidelines for any drop shadows you use inside your logo or artwork, and they also ask you to go full bleed on artwork which is illustrative versus an icon or logo.

So those keylines are simply suggestions for locational proportionality for logos / icons you may develop - like this example from that same spec page.

enter image description here

Hope this helps.

Poste Script:

After a brief comment exchange, I whacked up a quicky example to explain what I mean in more detail: Their example is shown fitting into the square guidelines - my quicky ligo fit inscribed into the portrait oriented rectangle.

Hopefully this clarifies more.

enter image description here

  • Thanks, but you sort of rephrase the documentation (which whole concept I do understand), yet do not answer my specific question. I still don't get why this keylines picture is so complex. Why so many rectangles? What is circle 1? As a developer with a very superficial design background, I feel that I'm missing something here.
    – Sébastien
    Commented Jun 19, 2019 at 14:48
  • Si vous avez créé un ligo qui inscrit dans un carré, vous pouvez choisir un ligne directrice d’un carré; si vous avez créé un ligo qui on peut inscrit dans un cercle, choisez un cercle - c’est tout! Commented Jun 20, 2019 at 5:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.