Icons

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.

Installation

npm install @nib/icons

Usage

Import icons using one of these two options:

Option 1

import BasketballGraphicIcon from '@nib/icons/graphic/Basketball';
import CardSystemIcon from '@nib/icons/system/Card';

  <BasketballGraphicIcon size='xl' />
  <CardSystemIcon size='md' />

Option 2

import {BasketballGraphicIcon, CardSystemIcon} from '@nib/icons';

  <BasketballGraphicIcon size='xl' />
  <CardSystemIcon size='md' />

The safest for bundle size is Option 1, but some developers prefer Option 2. If you opt for the second approach, ensure you are using ES6 modules and a bundler that supports tree-shaking.

Interactive demo

<>
  <BasketballGraphicIcon size="md" />
  <HomeSystemIcon size="md" />
</>

Request an Icon

If you wish to add an icon to Mesh, let us know by filling out our feedback form!

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.

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

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.

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

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:

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

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

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

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.

Related components

• Loader