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:

``css
@import '@bi-digital/tokens';
`

Or in jsx/tsx:

`ts
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

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

function App() {
return ;
}
`

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

$3

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.

`jsx


`

$3

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:

`js
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.