BI Icons

BI specific icons. Available as React components and raw SVGs.

Get started

Install the icons and the required CSS tokens: npm i @bi-digital/icons@latest @bi-digital/tokens

Then add the styles, either in a CSS-file:

@import '@bi-digital/tokens';

Or in jsx/tsx:

import '@bi-digital/tokens';

If you use @bi-digital/css, you don't have to install @bi-digital/tokens as well since it's included in @bi-digital/css.

Use

import { CheckmarkIcon } from '@bi-digital/icons';

function App() {
  return <CheckmarkIcon title="star" size="medium" />;
}

Tip: Use the title prop to make accessible icons, if the icon is purely decorative, use aria-hidden="true"

Sizing

Each icon's width and height is default 1em. This allows you to use the native fontSize-prop to adjust sizing. You can also use the size-prop to achive the same.

<CheckmarkIcon fontSize="1.5rem" />
<CheckmarkIcon size="lg" />

Direct svg-import

The icons are also available in raw SVG-format behind /svg. Note that svg-files do not have the suffix Icon and are in kebab-case:

import ArrowRightIcon from '@bi-digital/icons/svg/arrow-right.svg';

Icons

There are several icons available, view all and read the docs at designsystem.bi.no.