@transferwise/icons

Wise icons

Check out the Live Demo

Set of SVG icons designed and built by Wise and distributed as React and AngularJS components. Each Icon is designed in two sizes: 16 and 24 pixels. The icon set has mostly outline icons but some of them also have filled variants.

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

Browse all icons here: https://transferwise.github.io/icons

Usage

Install

yarn add @transferwise/icons

or

npm install @transferwise/icons

Import and use it with

React

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

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

will result in

<span class="tw-icon tw-icon-bank" aria-hidden="true" role="presentation">
  <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} filled 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" filled="true"></tw-activity-icon>

<tw-balance-icon size="16" filled="$ctrl.isFilled"></tw-balance-icon>

<tw-icon name="balance" size="16" filled="$ctrl.isFilled"></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="presentation"" attributes will be added.

Contributing

Add / remove / change icon(s) in the icons folder. Follow the naming convention, use kebab-case for naming the icon and its folder. For naming the SVG files in the folder, follow this pattern: <<variant>>_<<size>>.svg, e.g. fill_16.svg or outline_24.svg.

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 yarn build to check your changes.
2. For a single-run check of version match and linting errors, run yarn 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 CircleCI build passes, you will be able to squash and merge.
6. Code will automatically be released to GitHub and published to npm with the version specified in the changelog and package file.