Skip to content
icons

Construction

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.

Terminology

Designing icons with confidence first requires a deeper understanding of their anatomy. Here are some common terms used in the practice of icon design.

Headlights icon, shown alone with number captions 1, 2, and 3.
1. Open stroke with squared terminal. 2. Bézier curve. 3. Squared corner.
Parking icon shown alone, with number captions 4, 5, and 6.
4. Closed stroke path. 5. Counter stroke (gaps/separation). 6. Counter area (exclusions/negative spaces).

Grids and sizes

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.

Icon construction grids are available for use from the Volvo Cars Icon Inventory library.

Optimisation

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.

3 trip icons shown in a row, decreasing in both size and detail from left to right. The smallest icon being the least complex, it is adjusted carefully and without loss of meaning.
Reduce or enhance the amount of detail when designing an icon at different sizes.

Strokes

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.

Prohibited icon (circle with diagonal line) shown at a stroke thickness of 1 pixel. This thickness is typically used for mobile and web iconography.
Typical stroke thickness of mobile and web icons.
Prohibited icon (circle with diagonal line) shown at a stroke thickness of 2 pixels. This thickness is mainly used for icons that appear within car UI.
Typical stroke thickness of in-car icons.

Counter strokes

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.

Microphone icon, with annotation focusing on the counter stroke (negative) spaces that occur within the icon design.
Counter stroke spaces should ideally occupy whole pixels.
Charging station icon, with annotation focusing on the counter stroke (negative) spaces that occur within the icon design.
Use counter strokes to cut and separate parts of an icon.

Corners

To maintain a consistent visual language for icons, we limit the choice of cornering to 4 variations: squared, or rounded–with a value of 3 or 4 for radii. Corners can be applied to both strokes and fills. Use corners in places where the icon metaphor will benefit from a rounded appearance.

Padlock icon shown at a stroke thickness of 1 pixel. Annotations focus on the corner radius of 3 points. We use rounded corners and/or squared corners.
Squared corners (1) may be used along with rounded corners. Only round corners to aid understanding.
Padlock icon shown at a stroke thickness of 2 pixels. Annotations focus on the corner radius of 4 points. We use rounded corners and/or squared corners. Only round a corner if it adds to the icon metaphor.
Fully rounded corners (2) may also be used when designing icons.

Grid keylines

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.

Shapes

Shape keylines can be used to determine the general size and form of an icon.

4 icons displayed in a row, each designed to occupy different shape keylines from within the icon construction grid. The shapes from left to right are, circle, square, rectangle portrait, and rectangle landscape. Note there are still two battery icons in use at Volvo Cars.

Angles

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.

4 icons displayed in a row, each one illustrates how the designer took influence from the icon construction grid in order to decide which angles to adopt during their creative process. The 4 different angle keylines are highlighted in blue within this graphic.

Icons with text

Text within icons uses Volvo Novum, 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.

3 icons displayed in a row, each one contains typography. The type used in these examples is balanced in relation to the overall icon design and weight. Type must be expanded within icons.
Text weight should be similar to the stroke weight of an icon. Avoid light weights to improve legibility.

Icons and pictograms

Are you dealing with an icon or a pictogram? It's important to understand the difference.

Icons

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.

Pictograms

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 product marketing / print.

Clean and simple example of a search icon.
Example icon.
Example of a pictogram, which shows 4 figures with 2 briefcases beside them. This graphic is larger and more detailed than a standard system icon. This pictogram appears in cars and indicates vehicle load/capacity.
Example pictogram.

Icon design principles

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.

Checklist

  1. Clear and immediate
  2. Understandable and predictable
  3. 'Reads' better than words
  4. Designed for each size
  5. Simple - fewer details, more meaning
  6. Unique details - distinct, interactive
  7. Playful - states, motion, feedback
  8. Respects overarching themes - 2D perspective, sustainability, modernity
  9. Familiar - in form and function
  10. High quality - final execution elevates trust and authenticity

/