@sumup-oss/icons

A collection of icons for the web, part of the SumUp Circuit Design System.

Installation

Depending on your preference, run one of the following in your terminal:

# With npm
npm install @sumup-oss/icons

# With yarn v1
yarn add @sumup-oss/icons

Usage

Import as React component

The easiest way to use an icon in React is to import it as a component. This approach works out of the box (no special loaders needed), is tree-shaking enabled, and comes with TypeScript typings included.

import { Check } from '@sumup-oss/icons';

const SuccessMessage = ({ description }) => (
  <div>
    <Check />
    <span>{description}</span>
  </div>
);

Some icons have multiple sizes. They default to size '24', if supported, or to the smallest available size. Use the size prop to show one of the other sizes ('16' or '32') instead:

import { CircleCheckmark } from '@sumup-oss/icons';

const SuccessMessage = ({ description }) => (
  <div>
    <CircleCheckmark size="24" />
    <span>{description}</span>
  </div>
);

To change the color of an icon, set the color property in CSS. The color will cascade down since the fill and stroke attributes of all monochrome icons are set to currentColor. Here's an example using CSS Modules:

/* SuccessMessage.module.css */
.icon {
  color: green;
}

// SuccessMessage.tsx
import { Check } from '@sumup-oss/icons';
import styles from './SuccessMessage.module.css';

const SuccessMessage = ({ message }) => (
  <div>
    <Check className={styles.icon} />
    <span>{message}</span>
  </div>
);

Import as SVG file

Alternatively, it's possible to import the raw SVG files. Most bundlers require a special loader to make this work. For Webpack, we recommend the file-loader which turns the import into a URL to the SVG.

import checkIcon from '@sumup-oss/icons/check_24.svg';

const SuccessMessage = ({ message }) => (
  <div>
    <img src={checkIcon} alt="" />
    <span>{message}</span>
  </div>
);

It is not possible to change the color of an external SVG using the css color property. Instead, you can use the CSS filter hack to colorize the icon.

Load from a URL

The latest version of the icon library is automatically deployed to Vercel. The files are hosted behind a global CDN, so they load quickly for all users. Use the getIconURL helper function to obtain the full URL with type-safety:

import { getIconURL } from '@sumup-oss/icons';

const SuccessMessage = ({ message }) => (
  <div>
    <img src={getIconURL('check', '24')} alt="" />
    <span>{message}</span>
  </div>
);

Alternatively, you can manually construct the URL (https://circuit.sumup.com/icons/v2/<name>_<size>.svg). For example:

.icon {
  background-image: url('https://circuit.sumup.com/icons/v2/check_24.svg');
}

It is not possible to change the color of an external SVG using the CSS color property. Instead, you can use the CSS filter hack to colorize the icon.