Contributing to the icon kit

HDS iconography uses images and symbols to represent an object visually. Icons communicate a message and should be distinct and informative. Icons should be used sparingly in services to provide clarity and reduce cognitive load on users.

Icons are an important part of the city of Helsinki's visual aesthetics. Together with the rest of the brand assets, they make up an entity that is part of a functioning city.

Anatomy

Example: The basic building blocks to successful icons.

The basic geometric shapes of the circle, square, and triangle provide a visually strong foundation for icon creation. Icons should always be simple and easy to understand.

The necessary parts of an icon grid are determined by context—where the icons will be displayed, how they will be masked, and what shapes will be useful as templates. The ingredients may include a pixel grid, key shapes, orthogonal, mask, and a safe area (and a trim area), each providing reference points to draw against.

As with any recipe, you as the HDS creator will choose what to use and what to omit.

Dimensions

HDS icons are drawn on a pixel grid of 24px × 24px and scaled up or down linearly to different sizes. Use the grid as your basic guideline to snap the vector in place. HDS recommends fine-tuning each size set separately and making size-specific adjustments for each set of dimensions.

Keyshapes and orthogonal

Example: Keyshapes visualised on the left. Orthogonal on the right.

Orthogonal refers to keylines that intersect the center point of the icon and create additional vertices to use. These lines commonly slice the canvas at 90° and 45°. When additional angles are needed, increments of 15° and 5° are the next steps.

Masks

Example: Basic steps to masking in most programs.

A mask customizes the container of an icon from the default square canvas. They also work great for testing different design ideas without having to commit to certain dimensions or layouts. Masks may be embedded in the asset itself or applied afterwards.

Note that some programs cut away the masked area, and some leave the masked area in place. Similarly, some programs need the mask layer to be on top and some on the bottom.

Masks should always be flattened before exporting the icon asset.

About grids

Grids are meant to be used as guides, not hard rules. Drop them when they stop working for you. Always check for the optical balance. If something does not feel quite right, trust your eyes more than the grid.

E.g. The human eye (or the brain) is more tuned to see the contrast in horizontal lines than vertical, so one should sometimes consider beefing up vertical lines.

Pixel grid

Example: Pixel grid used for making HDS icons.

A pixel grid helps you draw in specific increments when snapping to a grid. A 1px increment has long held the standard in digital and an increment of 2px–8px has been adopted more recently. Icons sit snugly on their 24 x 24px system icon grid, using 1px–2px strokes. Pixel-snapping helps you render sharper icons on lower resolution screens but has become much less of a requirement as hardware rendering has improved.

Icon grid

Example: Variations of common icon grids.

An icon grid is a tool for speed and consistency. When drawing HDS icons, know the rules intimately and know when and how to bend them. The icon grid provides the same starting point for multiple contributors.

Safe area & trim area

Example: The difference between safe area and trim area explained.

The safe area (or live area) shows where the important content of the icon should live, while the inverse – the trim area – shows the area to avoid. In some cases, the safe area is soft guidance, but the safe area becomes more crucial when the content is cropped.

Pixel-Perfect design

Pixel-perfect alignment is important when designing for small sizes. Anti-aliasing on the edges of an icon at small sizes can make the icon appear choppy or fuzzy. Space between lines that do not align to the pixel grid will be anti-aliased and appear blurry.

Aligning the icon to the pixel grid will make the edges crisp on straight lines and crisper on precise angles and curves. As mentioned, 45-degree angles are best (after straight lines) because the pixels used to define the angle are stacked or stepped diagonally.

This is similarly true for corners and curves: The more mathematically precise they are, the crisper the anti-aliasing will be. Note that pixel-perfection is less relevant on higher-resolution screens, such as “Retina” displays.

Line Weight

A line weight of two pixels is ideal, but three is sometimes necessary. The goal is to provide visual hierarchy and optical accuracy, without introducing too much variety and thus destroying consistency. In most cases, avoid very thin lines, especially in glyph icons.

Step-by-step instructions

Animation: How to make the Alert Circle icon using basic shapes.

• Turn on snapping to pixel in your preferred graphics program.
• Establish a 24px × 24px pixel rectangle.
• Draw each of the horizontal and vertical lines 1 or 2px apart to form a mesh.
• Carefully draw the 45° orthogonal lines and key shapes so they correspond to the lines in step 3.
• Plot the basic shape of the desired icon.
• Thinking in terms of basic shapes, begin to add or eliminate parts of the shape using new shapes and/or masks.
• When you are satisfied with the result, flatten the icon to a vector shape.
• Apply a layer that acts as a colour mask (Sketch and Figma)

Note that the key canvas size for the HDS icon grid is 24 × 24px, which means that icons are created at this size. Put into use, however, HDS icons may be scaled to a range of sizes: 16 × 16px, 48 × 48px, 64 × 64px etc.