Skip to main content

Using icons

latest

Arc provides icons in multiple formats to suit varying project requirements. If you're using the icons in a react project its recommended that you use the react icons. These can be imported individually, and will result in much better performance than the other formats.

caution

Only use the other formats of the icons if you have a non-react project or you have no other choice. Previous versions of arc had performance issues because all the icons were bundled with the main stylesheet. The react icons have to imported individually, which will result in much better performance. The other formats are only provided for backwards compatibility and non react projects.

React icons​

These icons are produced using SVGR and optimised using SVGO. They are react components that return the svg markup. They contain typescript declarations so they can be used with typescript projects. They can be used directly and require zero configuration.

They can be imported like so from the @arc-ui/icons package.

import { BtIconInfo } from "@arc-ui/icons/react/BtIconInfo";
info

Note that each icon is imported individually. This is so you only include the icons that are needed by your project. It is not possible to import all the icons in one statement, you have to import them individually.

Using the Icon component​

The arc icons can also be used with the icon component, which will allow you to set the color and size easily. All you need to do is pass the imported icon as a prop like so.

import { BtIconInfo } from "@arc-ui/icons/react/BtIconInfo";
import { Icon } from "@arc-ui/components";

<Icon icon={BtIconInfo} size={40} />

Finding icons you can use​

You can see all the available icons here. The name at the bottom of the icon is both the name of the React icon and the path to import it.

import { <the-icon-you-want> } from "@arc-ui/icons/react/<the-icon-you-want>";

For example: 

import { BtIconCake } from "@arc-ui/icons/react/BtIconCake";
import { BtIconWiFi } from "@arc-ui/icons/react/BtIconWiFi";
import { BtIconInfo } from "@arc-ui/icons/react/BtIconInfo";
import { BtIconPhone } from "@arc-ui/icons/react/BtIconPhone";
import { BtIconLaptop } from "@arc-ui/icons/react/BtIconLaptop";
import { BtIconMobile } from "@arc-ui/icons/react/BtIconMobile";

CSS​

The icons are also available as CSS custom properties. To use them first import them into your project. Your bundler must be setup to handle css files (NextJs projects will work out of the box).

You can import them from @arc-ui/icons/tokens/css/svg.css

Example icon

You can then reference them in your css files. To do so you will need apply them as mask images, here is an example

  background-color: var(--bt-color-brand-indigo);
  display: block;
  height: 40px;
  mask-image: var(--bt-icon-info);
  width: 40px;

SCSS​

Using the SCSS icons is a similar process but the advantage over css custom properties, is that the variables wont be included in your final bundle.

You can import them from @arc-ui/icons/tokens/scss/svg.scss

  background-color: $bt-color-brand-indigo;
  display: block;
  height: 40px;
  mask-image: $bt-icon-info;
  width: 40px;

JavaScript​

The icons are also available as JavaScript constants, and the value is a string containing the svg markup.

You can import them from @arc-ui/icons/tokens/js/svg.js

import { BtIconInfo } from "@arc-ui/icons/tokens/js/svg.js";

// value of BtIconInfo = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><defs/><path d=\"M16 2a14 14 0 1014 14A14 14 0 0016 2zm0 27a13 13 0 1113-13 13.015 13.015 0 01-13 13z\"/><path d=\"M16 8.993a1 1 0 100 2 1 1 0 100-2zM15.995 12.977a.5.5 0 00-.5.5l-.002 9.01a.5.5 0 001 0l.002-9.01a.5.5 0 00-.5-.5z\"/></svg>";