When designing icons, use the following basic rules:
- Minimum screen size: Icons must be legible at the minimum size displayed.
- Simple and varied: Keep the details simple, but have enough variety to tell the icons apart.
- 1” x 1” is the maximum displayed size.
TIP: Try using the squint test. Squint your eyes and determine whether you can make out the shape of an icon. Good icons are recognizable from afar and are easy to read.
Construction lines and grids
To ensure consistency and cohesiveness of your icons, use a construction grid similar to the one we use for UI:
Icon specs
To help your artists create icons for your project, give them your specs for
- rounded corners
- stroke size
- smallest point size
- gaps
- angles
Optical balance and adjustment
A slight increase in the height of an icon can make it look more consistent throughout your design. Here is an example of a triangle and circle exceeding the height of a square:
Use gaps to achieve optical balance, consistent look and feel, and visual appeal. The following example shows that each icon’s height was adjusted to keep the icon inside its bounding frame. Square and circular icons cover more area and have more weight, so they are kept away from the margins. On the other hand, triangular and rectangular icons have less weight and can be optically adjusted to “touch” the margins, thus creating the appearance of having additional weight.
Silhouettes and readability
Test new icons with different line weights. Also test the filled and inverted versions of icons. A different version of an icon could impede the players’ ability to read it. If the players cannot identify an icon instantly, they will experience difficulties during the gameplay.
Test several versions of your icons and determine what works and what doesn’t.
Meaning and ambiguity
Design of icons can never be straightforward, because you are creating a visual language that will be new to players. Some icons are ambiguous, so they should include text that conveys the meaning clearly:
Here’s an example of an icon legend that provides descriptive text next to each potentially ambiguous icon:
Buddy icons from MGS
Icon style
Try boiling down your art direction of icons into a single style that not only consistently conveys the Shape Language and the broader visual identity of your game, but also helps reduce the amount of text and thus screen space used by the game.
