Javascript Pro Package

The Boxicons Pro JavaScript library is a lightweight, framework-agnostic package for generating SVG icons. It provides direct access to 50,000+ variations and supports SVG string generation, DOM manipulation, and auto-replacement.

Installation

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

Add the following to your .npmrc:


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

Ensure your API key remains secure. Avoid committing it directly to public repositories; consider using environment variables for CI/CD environments.

Install the main package:


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

Quick Start

The library provides multiple ways to render icons.

SVG String Generation


import { createSvgString, Alarm, Home } from '@boxicons-pro/js';
 
// Simple usage
const alarmSvg = createSvgString(Alarm);
 
// With customization
const homeSvg = createSvgString(Home, {
  size: 'lg',
  fill: '#3b82f6',
  weight: 'thin'
});

Direct SVG Access

Icons are exported as objects containing the path data, allowing for custom rendering logic if needed.


import { Alarm } from '@boxicons-pro/js';
 
console.log(Alarm.name); // "alarm"
console.log(Alarm.paths.basic.regular.normal); // SVG path data string

Performance

The library is fully tree-shakable. When using modern bundlers, only the icons you explicitly import will be included in your final bundle.

Method 1: Named Imports


import { Alarm, Heart } from '@boxicons-pro/js';

Method 2: Granular Packages


import { Alarm } from '@boxicons-pro/js-basic-regular-bold';

Icon Packs

Boxicons Pro includes multiple icon packs:

Pack	Description
`basic`	Simple line icons (default)
`filled`	Solid filled icons
`duotone`	Two-tone icons with primary and secondary colors
`duotone-mix`	Duotone icons with mixed styling
`duotone-solid`	Duotone icons with solid styling
`brands`	Brand and logo icons


createSvgString(Alarm, { pack: 'basic' });
createSvgString(Alarm, { pack: 'filled' });
createSvgString(Alarm, { pack: 'duotone' });
createSvgString(Alarm, { pack: 'duotone-mix' });
createSvgString(Alarm, { pack: 'duotone-solid' });

Styles

Each pack (except brands) supports three styles:

Style	Description
`regular`	Default rounded corners
`rounded`	More pronounced rounded corners
`sharp`	Sharp, angular corners


createSvgString(Alarm, { style: 'regular' });
createSvgString(Alarm, { style: 'rounded' });
createSvgString(Alarm, { style: 'sharp' });

Weights

Icons come in three weights:

Weight	Name	Description
200	`thin`	Light, thin strokes
400	`normal`	Default weight (no suffix needed)
700	`bold`	Heavy, bold strokes


// Using weight names
createSvgString(Alarm, { weight: 'thin' });
createSvgString(Alarm, { weight: 'normal' });  // default
createSvgString(Alarm, { weight: 'bold' });
 
// Using numeric values
createSvgString(Alarm, { weight: 200 });
createSvgString(Alarm, { weight: 400 });
createSvgString(Alarm, { weight: 700 });

Duotone Icons

Duotone icons support separate colors and opacities for primary and secondary layers:


createSvgString(Alarm, {
  pack: 'duotone',
  primaryFill: '#3b82f6',
  primaryOpacity: 1,
  secondaryFill: '#93c5fd',
  secondaryOpacity: 0.4
});

Props Reference

Common Props

Prop	Type	Default	Description
`pack`	`'basic' \| 'filled' \| 'duotone' \| 'duotone-mix' \| 'duotone-solid' \| 'brands'`	`'basic'`	Icon pack to use
`style`	`'regular' \| 'rounded' \| 'sharp'`	`'regular'`	Icon style variant
`weight`	`'thin' \| 'normal' \| 'bold' \| 200 \| 400 \| 700`	`'normal'`	Icon stroke weight
`size`	`IconSize`	`'base'`	Preset size
`width`	`number \| string`	-	Custom width (overrides size)
`height`	`number \| string`	-	Custom height (overrides size)
`fill`	`string`	`'currentColor'`	Fill color
`opacity`	`number \| string`	-	Overall opacity (0-1)
`flip`	`'horizontal' \| 'vertical'`	-	Flip direction
`rotate`	`number \| string`	-	Rotation in degrees
`removePadding`	`boolean`	`false`	Remove icon padding by adjusting viewBox
`className`	`string`	-	CSS class name

Duotone-specific Props

Prop	Type	Default	Description
`primaryFill`	`string`	`'currentColor'`	Primary layer fill color
`primaryOpacity`	`number \| string`	`1`	Primary layer opacity
`secondaryFill`	`string`	`'currentColor'`	Secondary layer fill color
`secondaryOpacity`	`number \| string`	`0.4`	Secondary layer opacity

Testing

Test your Pro icon integration:


import { describe, it, expect } from 'vitest';
import { createSvgString, Alarm } from '@boxicons-pro/js';
 
describe('Boxicons Pro Integration', () => {
  it('should support all packs', () => {
    const basic = createSvgString(Alarm, { pack: 'basic' });
    const filled = createSvgString(Alarm, { pack: 'filled' });
    const duotone = createSvgString(Alarm, { pack: 'duotone' });
    
    expect(basic).toContain('<svg');
    expect(filled).toContain('<svg');
    expect(duotone).toContain('<svg');
  });
 
  it('should support styles and weights', () => {
    const svg = createSvgString(Alarm, {
      style: 'rounded',
      weight: 'bold'
    });
    
    expect(svg).toContain('<svg');
  });
 
  it('should support duotone colors', () => {
    const svg = createSvgString(Alarm, {
      pack: 'duotone',
      primaryFill: '#3b82f6',
      secondaryFill: '#93c5fd'
    });
    
    expect(svg).toContain('fill="#3b82f6"');
  });
});