# @sumup/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/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
# With npm
npm install @sumup/icons
# With yarn v1
yarn add @sumup/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.
```jsx
import { Check } from '@sumup/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:
```jsx
import { CircleCheckmark } from '@sumup/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 with a CSS-in-JS library:
```jsx
import styled from '@emotion/styled';
import { Check } from '@sumup/icons';
const GreenCheck = styled(Check)`
color: green;
`;
const SuccessMessage = ({ description }) => (
{description}
);
```
### 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.
```jsx
import checkIcon from '@sumup/icons/check_small.svg';
const SuccessMessage = ({ description }) => (
{description}
);
```
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. You can load the icons from `https://circuit.sumup.com/icons/v2/_.svg`. Below are some examples:
```html
```
```css
.icon {
background-image: url('https://circuit.sumup.com/icons/v2/checkmark_16.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.