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
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.