React Pro Package

The Boxicons Pro React package provides over 50,000 icon variations as highly optimized, tree-shakable components. It’s the most efficient way to use Boxicons in modern React applications.

Installation

To access the Pro registry, you must first configure your .npmrc file with your API key. You can find your key in your Account Settings .

1. Add the following to your .npmrc:

@boxicons-pro:registry=https://npm.boxicons.com/
//npm.boxicons.com/:_authToken=YOUR_API_KEY

2. Install the main package:

# Using npm
npm install @boxicons-pro/react
 
# Using yarn
yarn add @boxicons-pro/react
 
# Using pnpm
pnpm add @boxicons-pro/react

Quick Start

import { Alarm, Home, User } from '@boxicons-pro/react';
 
function App() {
  return (
    <div>
      <Alarm size="lg" />
      <Home weight="thin" color="#3b82f6" />
      <User pack="filled" style="rounded" />
    </div>
  );
}

Performance & Tree-Shaking

The package supports multiple import methods to suit your development and production needs.

Method 1: Named Imports (Best for DX)

Ideal for development. Modern bundlers (Vite, Webpack 5) will tree-shake unused icons in production, though initial dev build times may be slightly longer.

import { Alarm, Home } from '@boxicons-pro/react';

Method 2: Direct Imports (Best for cold-start performance)

Guarantees that only the code for the specific icon is loaded, bypassing the barrel file entirely.

import { Alarm } from '@boxicons-pro/react/icons/Alarm';

Method 3: Granular Packages (Best for bundle size)

If your project only uses a specific style (e.g., Rounded-Bold), you can install that variant specifically to minimize the dependency graph.

import { Alarm } from '@boxicons-pro/react-basic-rounded-bold';

Icon Packs

Boxicons Pro includes multiple icon packs:

<Alarm pack="basic" />
<Alarm pack="filled" />
<Alarm pack="duotone" />
<Alarm pack="duotone-mix" />
<Alarm pack="duotone-solid" />

Styles

Each pack (except brands) supports three styles:

<Alarm style="regular" />
<Alarm style="rounded" />
<Alarm style="sharp" />

Weights

Icons come in three weights:

// Using weight names
<Alarm weight="thin" />
<Alarm weight="normal" />  // default
<Alarm weight="bold" />
 
// Using numeric values
<Alarm weight={200} />
<Alarm weight={400} />
<Alarm weight={700} />

Naming Convention

Icon names are converted from kebab-case SVG filenames to PascalCase:

Props Reference

Common Props

Duotone-specific Props