@payfit/unity-icons

A comprehensive icon library for the Unity design system, provided as React Components.

Installation

Install the package in your project. We recommend you use this package alongside @payfit/unity-components.

yarn add @payfit/unity-icons @payfit/unity-components

Ensure that react and react-dom are also installed in your project:

yarn add react react-dom

Usage

This package provides two ways to import and use icons.

1. Import the provider

Wrap your application with the IconProvider to make all icons available in your application.

import { UnityIconsProvider } from '@payfit/unity-icons'

function App() {
  return (
    <UnityIconsProvider>
      <MyComponent />
    </UnityIconsProvider>
  )
}

2. Use the IconSprite component

Render any icon using the IconSprite component, passing the icon's name as the src prop.

import { IconSprite } from '@payfit/unity-icons'

function MyComponent() {
  return <IconSprite src="Icon1" />
}

3. Use the Icon component from unity components

You can also use the Icon component from @payfit/unity-components to render icons (recommended). The Icon component provides additional customization options that follow design system guidelines, and uses the IconSprite component internally.

import { Icon } from '@payfit/unity-components'

function MyComponent() {
  return <Icon src="Icon1" size={20} />
}

API

The icons library uses SVG sprites to render icons. All icons are referenced by their name, which is the filename in the /svg folder without the extension. The IconSprite component accepts all the props of an SVG element.

import { IconSprite } from '@payfit/unity-icons'

function MyComponent() {
  return <IconSprite src="AirplaneFilled" width="32" height="32" fill="#000" />
}

We recommend you customize the icon's color, sizes, and other properties via the Icon component from @payfit/unity-components.

Customization

All icons use currentColor for their fill or stroke, allowing you to easily customize the color using CSS or the color prop.

TypeScript Support

This package includes TypeScript definitions, and a list of all the available icon names is exported as a type.

import { iconNames, UnityIcon } from '@payfit/unity-icons'

const myIcons: UnityIcon[] = ['AirplaneFilled', 'CakeOutlined']

console.log(iconNames) // ['AirplaneFilled', 'AirplaneOutlined', ...+309 icons more]

Browser Support

This package supports all modern evergreen browsers. It does not support IE.