Newskit Logo

Foundations

Iconography

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

Overview

NewsKit icons need to support multiple themes, so icons in the library aim to strike a balance between form and function. They represent actions and as simply and as accurately as possible for better understanding for users. We leverage commonly established icon usage, naming conventions and platform considerations where possible for ease of comprehension for users.

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

Learn more about the Icon component

Principles

Simple

The style of icons in the library is paired back and not too elaborate for ease of interpretation, and so they work well at smaller sizes.

Consistent

Icons should be used consistently across products and platforms for the same function.

Contextual

Icons are used as visual representations of common actions and commands to provide additional context and enhance usability.

Characteristics

Icons have the following defining characteristics.

Overlay

Et libero, congue at condimentum. Id lobortis urna consectetur a, scelerisque lorem amet, magnis fringilla.

Note

Currently only applicable for News UK teams

Colour

Colour can be applied to icons using Ink colour tokens.

Size

Icons can be sized using icon size tokens.

Structure

Icons in the library are created using a 24px x 24px frame, with a 2px clear space around the outer edges (shown in teal on the diagram).

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

Overlay

Et libero, congue at condimentum. Id lobortis urna consectetur a, scelerisque lorem amet, magnis fringilla.

Note

Currently only applicable for News UK teams

Colour

Colour can be applied to icons using Ink colour tokens.

Size

Icons can be sized using icon size tokens.

Structure

Icons in the library are created using a 24px x 24px frame, with a 2px clear space around the outer edges (shown in teal on the diagram).

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

We support the full library of default Icons available in NewsKit.

Library

The NewsKit icon library is sourced from the Google Material icon library. NewsKit provides both Filled and Outlined sets, which are the basis for the NewsKit default icon library.

Icons have the following naming convention:

Icon {Set} {Name}

For example - IconFilledSearch or IconOutlinedHome.

We support the full library of default Icons available in NewsKit.

Usage

The following guidance describes how and when to appropriately use iconography.

Do

Icon content should only be contained within the 20px live area.

The 2px border of padding around the live area should be kept clear.

Do not

To avoid distorting an icon, position icons ‘on pixel’ so they appear clear and not pixelated or blurred.

Do

Icons should be used purposefully to reduce cognitive load and provide greater context.

Do not

Avoid using Icons as the sole way of communicating if there is the space to accompany with a label or supporting text.

Do

When used next to text, icons should be vertically centre-aligned.

Do not

Avoid using icon sizes that are noticeably larger or smaller than the text they are paired with, as this can lead to the interface feeling unbalanced.

Do

Icons should have a 3:1 minimum colour contrast ratio for sufficient contrast between icon color and its background.

View W3 web accessibility colour standards

Do

Try to give icons a name that adequately describes what it represents.

Motion

Motion is used to create movement and narrative within a product.

Motion is used to create movement and narrative within a product.