Skip to content
Stable

Icons

Our icon library presents pixel-perfect, scalable SVG-based icons that are light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand. Our icon library includes system and graphic icon assets.

Iconography guidelines

The iconography section of Mesh has a comprehensive overview of our iconography guidelines, as well as the full system and graphic icons library to view and download.

View iconography guidelines

Installation

bash
npm install @nib/icons

Usage

It is recommended to import icons individually as this will minimise the impact on bundle size.

jsx
import {BasketballGraphicIcon, HouseSystemIcon} from '@nib/icons';
<BasketballGraphicIcon size='xl' />
<HouseSystemIcon size='md' />

Interactive demo

jsx

Request an Icon

If you wish to add an icon to Mesh, send us an email with your request!

Request an Icon

System icons

Our system icons are used to symbolise common tasks and types of content in online products. System icons are designed to be used at small sizes only.

Phone

Rewards

Rotate

Rowing

View full system icon library

Props

All props passed to the system icons will be applied to the underlying <BaseIcon> as attributes to be applied to an <svg>.

PropTypeDefaultDescription
sizestring or numbersm (24px)The size of the icon. This value is applied to the height and width of the underlying <svg>. See Resizing an icon for more details.
fillstring or functioncurrentColorThe fill of the icon. Can be any of the named color tokens or theme selectors.

Graphic icons

Our graphic icons are used to provide visual expression to accompanying copy and they sit above the system icons. They are used in campaigns, print, and online. Our graphic icons are designed to be used at larger sizes - they have lighter stroke weight and have an accent path by default.

We highly recommend using the accented version of all graphic icons.

Accident

AccountBlocked

Accupuncture

Agent

View full graphic icon library

Props

All props passed to the graphic icons will be applied to the underlying <BaseIcon> as attributes to be applied to an <svg>.

PropTypeDefaultDescription
sizestring or numberlg (48px)The size of the icon. This value is applied to the height and width of the underlying <svg>. See Resizing an icon for more details.
fillstring or functioncurrentColorThe fill of the icon. Can be any of the named color tokens or theme selectors.

Resizing an icon

By default, the system icons are rendered at 24px while graphic icons are rendered at 48px.

System icons should not exceed 32px, while graphic icons must not fall below 32px.

When resizing an icon, both system and graphic icons share the same sizing logic. There are three ways that an icon be sized: using the standard scale, using a custom value, and using an object of breakpoints.

Standard scale

This method uses a string which maps to the following icon scale:

SizeValue
xs16
sm24
md32 (max size of system icons and min size of graphic icons)
lg48
xl64
xxl96
xxxl128

When a size is provided to an icon with this method, the corresponding value is passed to the underlying <svg> of the icon as px units.

System icons should be rendered on the smaller end of the spectrum (max size of md) while graphic icons should be rendered on the medium-to-high end of the scale (min size of md).

jsx
<BasketballGraphicIcon size="xxl" /> // Renders icon at 128px

Custom value

This method uses a custom number which represents the pixel size of the icons underlying <svg>. This allows users to define their own values outside of the standard scale.

Example:

jsx
<BasketballGraphicIcon size={72} /> // Renders icon at 72px

Object of breakpoints

Alternatively, you can manually define an object of key-value pairs for a breakpoint and its corresponding icon size at this screen width.

This method uses a custom prop breakpoints to define the object of breakpoints and the breakpoint utility from our layout package to map the breakpoints to height and width attributes.

Example:

jsx
import styled, {css} from 'styled-components';
import {map} from '@nib/layout';
const DynamicIcon = styled(BasketballGraphicIcon)`
${({breakpoints}) => map(breakpoints, val => css`width: ${val}px; height: ${val}px;`)}
`;
<DynamicIcon breakpoints={{xs: 48, lg: 128}} />; // Renders icon at 48px at 'xs' screen size, and 128px at 'lg' screen size.

Icon comparison

Our new icons are in a completely different style to our previous icon library. There is not a one-to-one mapping of icons between the systems.

See the Comparison of Icon Systems to help you migrate from the old icons to those listed on this page.