@transferwise/icons

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.

React and AngularJS icon components generated by script files (see src/build-scripts folder).

Usage

Install

pnpm add @transferwise/icons

Import and use it with

React

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" />

AngularJS

import { TwIconsModule } from '@transferwise/icons/lib/angular';

// add it to the list of dependencies
angular.module('your-app-name', [TwIconsModule]);

and in template

<tw-bank-icon size="24"></tw-bank-icon>

<tw-icon name="bank" size="24"></tw-icon>

<tw-activity-icon size="24"></tw-activity-icon>

<tw-balance-icon size="16"></tw-balance-icon>

<tw-icon name="balance" size="16"></tw-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;
}

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.

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 version match and linting errors, run pnpm run test.
3. Bump version number in package.json according to semver and add an item to CHANGELOG.md.
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. (CircleCI build will fail. I don't know how to get it to stop running)
7. Code will automatically be released to GitHub and published to npm with the version specified in the changelog and package file.