Wise icons

Check out the live demo

Each Icon is designed in three sizes: 16 (default), 24, and 32 pixels. The icon set are mostly outline icons but there are also some filled icons. These are all variations of an outline icon with -fill added as a suffix. Icons with a filled version have a blue badge in the Live Demo.

Icon components are generated by script files (see src/build-scripts folder).

Usage

Install

pnpm add @transferwise/icons

Import and use it with

import { Bank as BankIcon } from '@transferwise/icons';

const YourComponent = () => <BankIcon size={24} data-testid="bank-icon" />;

will result in

<span class="tw-icon tw-icon-bank" aria-hidden="true" role="none">
  <svg width="24" height="24" fill="currentColor">
    <path
      d="M22.003 9.408l-10-7.405-10 7.405 1.195 1.595 8.805-6.52 8.805 6.52 1.195-1.595z"
    ></path>
    <path d="M13 10v10h4v-7h2v7h2v2H3v-2h2v-7h2v7h4V10h2z"></path>
  </svg>
</span>

map of all icons (useful for dynamic icon pick up):

import * as icons from '@transferwise/icons';

const AchIcon = icons['Ach'];

<AchIcon />
<icons.Bank />

Each component has className property as well, so you can avoid wrapping your component in extra parent elements.

<BankIcon size={24} className="bank-profile-icon" />

Necessary CSS

To display the icons properly, you need to import CSS styles in your app. This file only makes sure that <svg>s are rendered as block elements and handles a11y features.

@import '~@transferwise/icons/lib/styles/main.min.css';

or just import it from JS depending on your build system:

import '@transferwise/icons/lib/styles/main.min.css';

Styling

Each component has a general .tw-icon CSS class and a specific one that includes the icon's name in kebab-case, e.g .tw-icon-card-wise

Coloring icons

The CSS rule color cascades to the <svg> shapes, because each inline SVG shapes all have the fill property set to currentColor. More info about Cascading SVG Fill Color. You can set the color of the icons, by simply using the following CSS

/* to set the color of all the icons */
.tw-icon {
  color: #2ed06e;
}

/* to set the color of individual icons */
.tw-icon-activity {
  color: #00b9ff;
}
.tw-icon-fast-flag {
  color: #00b9ff;
}

/* if an icon inside another element should have a specific color */
.parent-element > .tw-icon-fast-flag {
  color: #00b9ff;
}

/* change the color of the icon on :hover */
.parent-element:hover > .tw-icon-fast-flag {
  color: red;
}

RTL (right-to-left) support

Some icons are automatically mirrored when rendered in an RTL locale such as Arabic or Hebrew. This is handled via CSS using :lang() selectors, so your app must set the lang attribute on an ancestor element (typically <html>) for mirroring to take effect:

<html lang="ar" dir="rtl">

No additional props or configuration are needed — icons that should be mirrored will flip automatically when lang is set.

Locale-specific behaviour

Not all RTL icons mirror for every locale. For example, question mark icons (QuestionMark, QuestionMarkCircle) are only mirrored for Arabic, because the Arabic script uses a mirrored question mark glyph (؟) while Hebrew uses the standard western one (?).

Support for new RTL locales propagates automatically from the wise-atoms _metadata.json — no changes in this repo are needed.

You can check which icons have RTL variants and for which locales in the live demo — they are marked with a pink badge. Use the locale picker to preview mirroring.

Accessibility

Each React icon component has an optional title property in case your icon has a semantic meaning, use this property, so it will be visible for Screen Readers.

<ActivityIcon size={24} title="Wise card transcation" />

By default icon will be removed from accessibility tree as aria-hidden="true" and role="none" attributes will be added.

Contributing

Add / remove / change icon(s) in the wise-atoms project and then consume here. wise-atoms is a submodule so use --recursive when cloning or fix it later like this

If you are confused about how to update submodules then check here

Follow the naming convention, use kebab-case for naming the icon.

If an icon is updated but keeps its old name AND it used to be called something else (see OLD_ICON_NAMES_MAP in create-icons-map.ts) then you must delete the entry for that icon from the map so that the icon will get updated

The build process for parsing, optimizing and generating individual icon components out of SVG files is done by script files, that you can find the in the src/build-scripts folder. Rollup.js is used for generating the ES and UMD bundles of the library.

Follow these steps, if you'd like to contribute to the project:

1. Run pnpm run build to check your changes.
2. For a single-run check of linting errors, run pnpm run test.
3. Add a changeset by running pnpm changeset and following the prompts — select the semver bump level and describe what changed.
4. Submit your pull request from a feature branch and get code reviewed.
5. If the pull request is approved and the Github Action passes, you will be able to squash and merge.
6. After merge, the changesets action will open a release PR titled "chore: release new version and update changelog" that bumps the version and updates CHANGELOG.md. When that PR is merged, the package is automatically published to npm and released on GitHub.