Installation

React icon library built from Boxicons SVG files with full tree-shaking support.

Installation


npm install @boxicons/react
# or
yarn add @boxicons/react
# or
pnpm add @boxicons/react

Usage

Basic Usage


import { Alarm, Twitter, Home } from '@boxicons/react';
 
function App() {
  return (
    <div>
      <Alarm />
      <Twitter />
      <Home />
    </div>
  );
}

Icon Packs

Each icon can have multiple variants. Use the pack prop to switch between them:

basic - Outline/regular style icons (default for most icons)
filled - Solid/filled style icons
brands - Brand/logo icons (default for brand icons like Twitter, Facebook, etc.)


import { Alarm } from '@boxicons/react';
 
function App() {
  return (
    <div>
      {/* Basic/outline style (default) */}
      <Alarm />
      
      {/* Filled style */}
      <Alarm pack="filled" />
    </div>
  );
}

Combining Props

All props can be combined:


<Alarm 
  pack="filled"
  fill="#ffffff"
  opacity={0.8}
  size="lg"
  flip="horizontal"
  rotate={45}
  className="my-icon"
  style={{ margin: '8px' }}
/>

Standard SVG Props

All standard SVG props are supported and passed through to the underlying <svg> element:


<Alarm 
  className="icon"
  id="my-alarm-icon"
  aria-label="Alarm"
  role="img"
  onClick={() => console.log('clicked')}
/>

Ref Forwarding

Refs are forwarded to the SVG element:


import { useRef } from 'react';
import { Alarm } from '@boxicons/react';
 
function App() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  return <Alarm ref={iconRef} />;
}

Tree Shaking

This library is fully tree-shakeable. Only the icons you import will be included in your final bundle.


// ✅ Only Alarm is bundled
import { Alarm } from '@boxicons/react';
 
// ✅ Direct import also works
import { Alarm } from '@boxicons/react/icons/Alarm';

Naming Convention

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

SVG File	Component Name
`bx-alarm.svg`	`<Alarm />`
`bx-alarm-clock.svg`	`<AlarmClock />`
`bx-twitter.svg`	`<Twitter />`
`bx-8-ball.svg`	`<Icon8Ball />`

Note: Icons starting with numbers are prefixed with “Icon” (e.g., Icon8Ball, Icon500px).

Note: Some icons have the “Icon” suffix to avoid conflicts with reserved words (e.g., ReactIcon for the React logo).

TypeScript

Full TypeScript support with exported types:


import type { BoxIconProps, IconPack, IconSize, FlipDirection } from '@boxicons/react';

BoxIconProps


interface BoxIconProps extends SVGProps<SVGSVGElement> {
  pack?: 'basic' | 'filled' | 'brands';
  fill?: string;
  opacity?: number | string;
  width?: number | string;
  height?: number | string;
  size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
  flip?: 'horizontal' | 'vertical';
  rotate?: number | string;
  removePadding?: boolean;
}