Learn how to construct an icon that communicates effectively and fits within the Volvo Cars icon family. To get started, we'll introduce some helpful terms used within icon design.
Designing icons with confidence first requires a deeper understanding of their anatomy. Here are some useful terms used in the practice of icon design.
A construction grid is necessary to maintain consistency of size, shape, proportion and layout across the entire icon set.
There are multiple grid sizes available when creating an icon. Deciding which grid size to work with depends on the platform and context.
The grid and its keylines can be referenced in a variety of ways when forming an icon.
Design for the size. Different icon sizes require different levels of detail and correction. Avoid the temptation to simply scale an icon up or down. The goal is to create an icon that works well across a range of sizes and/or states.Reduce or enhance the amount of detail when designing an icon at different sizes.
In order to appear legible and sharp, strokes must be aligned to the pixel grid. Stroke thickness can be adjusted to optimise an icon for its context. Always set stroke terminals (end caps) to be squared, never rounded. To avoid blurring, all strokes must sit on whole pixels.
The small hollow spaces that appear within an icon are called counters. Use counter strokes in order to carve gaps and achieve a simpler, more recognisable icon. Counter stroke thickness can be adjusted to best suit the icon in question.
To maintain a consistent visual language for icons, we limit the choice of cornering to 4 variations: squared, or rounded–with either 3 or 4px radii. Corners can be applied to both strokes and fills. Use corners in places where the icon metaphor will benefit from a rounded appearance.
Just like letters in a typeface, icons must appear unified in style, size, shape, and weight. Each icon is unique, yet they should all possess common traits to help unite them as a family. To ensure common characteristics are included, design icons that follow any appropriate keylines within the grid.
Shape keylines can be used to determine the general size and form of an icon.
Keylines also define the ideal angles and radial sizings to use for icons. Following keylines whenever possible results in a more unified icon family. Fills, strokes, and stroke terminals may be positioned or cut at keyline angles of 90, 70, 45, or 30 degrees.
Text within an icon is mostly centre-aligned. In case of future change requests, always keep an unexpanded (editable) version of any icon that includes text. Text size, and/or weight may vary depending on the size of the icon and its final context. Text within icons may require tracking adjustment, and optical correction to optimise legibility.Text weight should be similar to the stroke weight of an icon. Avoid light weights to improve legibility.
Are you dealing with an icon or a pictogram? It's important to understand the difference.
How to spot an icon: Icons are highly simplified, recognisable symbols. They are used in order to communicate meaning clearly and quickly. Icons work at surprisingly small sizes, and in many cases are able to work alone. Icons are best suited for use within UI.
How to spot a pictogram: Pictograms tend to be illustrative. They use multiple symbols in order to communicate complex ideas. Pictograms may require additional words or figures in order to secure meaning. Pictograms are larger than icons, and are used mostly in print.
Get started with our top 10 icon design principles. Use these to anchor your approach and ensure that every new icon created works well, fits stylistically and embodies the Volvo Cars brand values.
- Clear and immediate
- Understandable and predictable
- 'Reads' better than words
- Designed for each size
- Simple - fewer details, more meaning
- Unique details - distinct, interactive
- Playful - states, motion, feedback
- Respects overarching themes - 2D perspective, sustainability, modernity
- Familiar - in form and function
- High quality - final execution elevates trust and authenticity