Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Iconography

Icons provide additional context to information, provide a visual cue, or visually reinforce the interaction.

Overview

NewsKit icons follow common icon usage, naming conventions and platform considerations where possible.

Icons in the library feed into the icon component, which a host of other more complex components in the system use.

Characteristics

Icons have the following characteristics:

Overlay

Most icons are available in filled and outlined variants. Occasionally, only one style is available for aesthetic reasons.

Colour

Apply colour to icons using ink colour tokens.

Size

Set the size of icons using icon size tokens.

Structure

Icons in the library use a 24px x 24px frame. They have a 2px clear space around the outer edges (shown in the outer frame on the diagram).

The space inside the outer frame is known as the ‘live area’. The complete composition, including clear space, is known as the ‘trim area’.

Override default icons

Designers - learn how to override default icons in the design icon library
Engineers - learn how to override default icons in the theme

Library

NewsKit’s icons come from Google Material icon library.

Icons follow a naming convention:

Icon {Set} {Name}

For example, IconFilledSearch or IconOutlinedHome.

How to use icons

Here’s how and when to use icons:

Do keep icons within the live area

Place icons within the 20px live area. Keep the 2px border of padding around the live area clear.

Don't pixelate icons

Position icons ‘on pixel’ so they’re clear and not pixelated, blurred or distorted.

Do use icons purposefully

Use icons to reduce cognitive load and provide context.

Don’t forget labels (if there’s space)

Include a label or supporting text alongside the icon if there is space. Dont rely on the icon to convey meaning. Alternatively, use a tooltip to provide additional context on hover.

Do align icons properly

Vertically centre-align icons when next to text.

Do make sure contrast is accessible

Use a 3:1 minimum colour contrast ratio between icon and background colours. Learn more about W3 web accessibility colour standards at WCAG.

Do name icons logically

Use names that describe what the icon represents. Keep them simple and logical.

Do balance icon and text size

Use icons that are proportional to the text they are paired with or the interface may feel unbalanced.

Motion

Motion creates movement and narrative in a product.

Learn more about motion

Motion

Motion creates movement and narrative in a product.