Documentation

Install

npm install onebit-icon-react

pnpm add onebit-icon-react

yarn add onebit-icon-react

React

Import the component by name and render it. Every icon accepts size, color, and any prop an <svg> takes.

import { RegularRocketlaunch } from 'onebit-icon-react';

export default function Deploy() {
  return (
    <button>
      <RegularRocketlaunch size={20} />
      Ship it
    </button>
  );
}

How icons are named

Component names are weight first, then the icon. They are not prefixed with the brand, and multi-word names collapse into a single capitalised chunk. The surest way to get a name right is to copy it from the icon's own page — every icon has one.

Weights

Six weights: Thin, Light, Regular, Bold, Fill and Duotone. Most icons exist at all six. The 104 icons drawn in-house are the exception — several are drawn at one weight only, and the icon page for each says which.

Sizing & colour

Icons default to 1em, so they scale with the surrounding text. Colour comes from currentColor at every weight, including Fill.

// Explicit size
<RegularRocketlaunch size={32} />

// Scales with the text around it
<p style={{ fontSize: 18 }}>Ship <RegularRocketlaunch /> faster</p>

// Colour is inherited
<span style={{ color: '#0F62FE' }}><RegularRocketlaunch /></span>

// …or set directly
<RegularRocketlaunch color="#FF9E00" />

// Tailwind
<RegularRocketlaunch className="w-6 h-6 text-blue-600" />

Plain HTML

If you are not using React, load the icon font once and reference icons by class. The class is the icon's file name, which you can copy from any icon page.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/onebit-icon.css" />

<i class="onebit onebit--regular-rocket-launch" style="font-size:24px;color:#0F62FE"></i>

CSS mask

No JavaScript, no font, and the icon still takes your colour. Good for pseudo-elements and build systems that would rather not import components.

.icon-ship {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("https://icons.onebit.ng/icons/regular-rocket-launch.svg") center / contain no-repeat;
          mask: url("https://icons.onebit.ng/icons/regular-rocket-launch.svg") center / contain no-repeat;
}

Accessibility

Icons are hidden from screen readers by default, which is right when they sit beside a label. When an icon is the only content — an icon-only button — give it a name.

// Decorative: the word "Deploy" already says it
<button><RegularRocketlaunch /> Deploy</button>

// Meaningful: the icon is the only content
<button aria-label="Deploy">
  <RegularRocketlaunch />
</button>

Contributing

Missing an icon? The set is strongest where it is local — if there is a Nigerian object, institution or everyday thing that no icon library draws, that is exactly the gap worth filling.

Licence and attribution live on the licence page.