Amsterdam Design System: Assets

This package provides all assets from the Amsterdam Design System. Use it to include the correct fonts, icons or logos in your website or application.

Installation

Install this package by itself if you want or need to reference assets directly in your project.

Note that our React components provide more functionality for some of the assets and use them automatically. You should use that package if your application uses React.

npm install @amsterdam/design-system-assets

Usage

Application icons

The Design System handbook helps using a favicon or a web manifest and application icons for home screens of devices in your website or application.

Font files

The package contains our Amsterdam Sans font in OpenType format (.otf) and Web Open Format Font (.woff). Import our stylesheet to make all of them available to your project.

import "@amsterdam/design-system-assets/font/index.css"

The Design System Handbook offers more guidance in using the font.

Note that the font is proprietary. Using it requires a license.

Icons

The Design System Handbook offers an overview of our icon library.

You can import the SVG files to use icons in your website or application.

In a React project, use the Icon component instead. It offers a convenient API for using the icons and streamlines alignment with text.

Logos

The logo of the City of Amsterdam is available as an SVG image, as well as logos for various departments and services.

In a React project, use the Logo component instead.

Updating

We follow semantic versioning and publish a change log to guide you through updates. The assets are a public API of the design system. Note that detecting changed or deleted assets is still a manual process.

Support

Contact us if you have a question, find an issue, or want to contribute. Find ways to reach us on designsystem.amsterdam.