# @sumup-oss/icons
A collection of icons for the web, part of the SumUp Circuit Design System.
[](https://github.com/sumup-oss/circuit-ui/) [](https://www.npmjs.com/package/@sumup-oss/icons) [](https://codecov.io/gh/sumup-oss/circuit-ui) [](https://github.com/sumup-oss/circuit-ui/tree/main/packages/icons/LICENSE) [](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
## Installation
Depending on your preference, run one of the following in your terminal:
```sh
npm install @sumup-oss/icons
```
## Usage
### Import as React component
The easiest way to use an icon in [React](https://reactjs.org/) 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.
```tsx
import { Check } from "@sumup-oss/icons";
const SuccessMessage = ({ description }) => (
{description}
);
```
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:
```tsx
import { CircleCheckmark } from "@sumup-oss/icons";
const SuccessMessage = ({ description }) => (
{description}
);
```
To change the color of an icon, set the `color` property in CSS. The color will [cascade down](https://css-tricks.com/cascading-svg-fill-color/) since the `fill` and `stroke` attributes of all monochrome icons are set to `currentColor`. Here's an example using CSS Modules:
```css
/* SuccessMessage.module.css */
.icon {
color: green;
}
```
```tsx
// SuccessMessage.tsx
import { Check } from "@sumup-oss/icons";
import styles from "./SuccessMessage.module.css";
const SuccessMessage = ({ message }) => (
{message}
);
```
### 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](https://github.com/webpack-contrib/file-loader) which turns the import into a URL to the SVG.
```tsx
import checkIcon from "@sumup-oss/icons/check_24.svg";
const SuccessMessage = ({ message }) => (
{message}
);
```
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](https://blog.union.io/code/2017/08/10/img-svg-fill/) to colorize the icon.
### Load from a URL
The latest version of the icon library is [automatically deployed](https://circuit.sumup.com/icons/v2) to [Vercel](https://vercel.com/). 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:
```tsx
import { getIconURL } from "@sumup-oss/icons";
const SuccessMessage = ({ message }) => (
![]({getIconURL("check",)
{message}
);
```
Alternatively, you can manually construct the URL (`https://circuit.sumup.com/icons/v2/_.svg`). For example:
```css
.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](https://blog.union.io/code/2017/08/10/img-svg-fill/) to colorize the icon.
### Filled icons
Outlined icons are the default. Use the filled icons for specific cases to help emphasize the icon's meaning or state, like an active link or a selected option.