Amsterdam Design System: React icons

This package provides all icons from the Amsterdam Design System 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 contain an Icon component that offers a convenient API for using the icons and streamlines alignment with text.

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.

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:

.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 for which icons carry the attribute and why.

Updating

When updating to a new release of this package, check the change log 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.