Skip to content
Davide Casali edited this page Mar 1, 2016 · 3 revisions

Icon Template

The file icon-template.ai contained in the repository is useful as a reference for different kinds of shape and helps to achieve optical alignment across all icons.

The guides are set up for common shapes: square, circle, rectangles.

You can edit that AI file to propose new icons.

A note on optical balance

The icon-template.ai file helps optical balance. Please refer to the Google Chrome icon guidelines when balancing icons. From the guidelines:

As the following figure shows, when you size an icon to fill the available area, square and circular icons are significantly larger than they should be, compared to icons with other shapes.

Visual Weight

Normalizing the icon sizes, as the next figure shows, gives the icons roughly even area and visual weight.

Visual Weight Balanced

The templates show the correct size for a square and a circle, but these are merely guides; icons that have pointy bits might stray outside these areas. If an irregularly shaped icon takes up very little area and is mostly negative space, using the entire [24dp] area might be acceptable.

Clone this wiki locally