# @amsterdam/design-system-react-icons

> All icons from the Amsterdam Design System as React components. Use it to use the correct icons in your React project.

Latest version **2.2.0** (published 2026-07-12) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @amsterdam/design-system-react-icons
pnpm add @amsterdam/design-system-react-icons
yarn add @amsterdam/design-system-react-icons
bun add @amsterdam/design-system-react-icons
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2026-07-12 |
| First published | 2023-02-10 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 551.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 38 |
| Author | Design System Team, City of Amsterdam <designsystem@amsterdam.nl> |
| Maintainers | datapunt-admin, leonardsmit, thomasbandit, remyvdwereld, alimpens, vincent.smedinga, dlnr, terryadamgem |
| Keywords | amsterdam, amsterdam-design-system, design-system, icons, nl-design-system |

## Links

- npm: https://www.npmjs.com/package/@amsterdam/design-system-react-icons
- Repository: https://github.com/Amsterdam/design-system
- Homepage: https://designsystem.amsterdam
- npm.io page: https://npm.io/package/@amsterdam/design-system-react-icons

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2026-07-12
- 2.1.0 — 2026-06-23
- 2.0.0 — 2026-01-09
- 1.1.1 — 2025-10-31
- 1.1.0 — 2025-09-26
- 1.0.1 — 2025-09-19
- 1.0.0 — 2025-05-28
- 0.1.14 — 2025-03-31
- 0.1.13 — 2024-10-25
- 0.1.12 — 2024-01-31
- 0.1.11 — 2023-12-22
- 0.1.10 — 2023-12-01
- 0.1.9 — 2023-11-27
- 0.1.8 — 2023-11-17
- 0.1.7 — 2023-10-10
- … 7 more at https://npm.io/package/@amsterdam/design-system-react-icons/versions

## README

<!-- @license CC0-1.0 -->

# Amsterdam Design System: React icons

This package provides all icons from the [Amsterdam Design System](https://designsystem.amsterdam) as React components.
Use it to use the correct icons in your React project.

## Installation

Install this package by itself if you want or need to use icons directly in your React project.

Note that our [React components](https://www.npmjs.com/package/@amsterdam/design-system-react) contain an [Icon component](https://designsystem.amsterdam/?path=/docs/components-media-icon--docs) that offers a convenient API for using the icons and streamlines alignment with text.

```sh
npm install @amsterdam/design-system-react-icons
```

## Usage

Import the component for the icon you need, as well as the generic Icon component, and use them in your JSX.

<!-- prettier-ignore -->
```tsx
import { Icon } from "@amsterdam/design-system-react"
import { SearchIcon } from "@amsterdam/design-system-react-icons"

export const App = () => <Icon svg={SearchIcon} />
```

## Right-to-left mirroring

Some icons (arrows, vehicles, speech balloons, and similar) carry a `data-directional="true"` attribute on their root `<svg>` element and are meant to be horizontally mirrored in a right-to-left (RTL) context.
When you render an icon through the `Icon` component, this mirroring is handled automatically by `@amsterdam/design-system-css`'s `.ams-icon` styles.

If you render an icon component directly, without wrapping it in `Icon`, you are responsible for the mirroring yourself.
Add a rule along these lines, scoped to wherever you render the icon:

```css
.your-icon-wrapper:dir(rtl) svg[data-directional="true"] {
  transform: scaleX(-1);
}
```

Apply `:dir(rtl)` to the wrapper, not the `<svg>` itself.
Directionality determination is defined per document language, and SVG has its own rules distinct from HTML's — applying `:dir()` directly to an `<svg>` element relies on unspecified cross-namespace inheritance behaviour that browsers handle inconsistently.

See the [icon contribution guide](https://github.com/Amsterdam/design-system/blob/develop/packages-proprietary/assets/CONTRIBUTING.md#right-to-left-rtl-mirroring) for which icons carry the attribute and why.

## Updating

When updating to a new release of this package, check the [change log](https://github.com/Amsterdam/design-system/blob/develop/packages-proprietary/react-icons/CHANGELOG.md) for breaking changes.
If there are any, update your application accordingly.

## Support

Contact us if you have a question, find an issue, or want to contribute.
Find ways to reach us on [designsystem.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message).

---
_Source: https://npm.io/package/@amsterdam/design-system-react-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._