Skip to Content
JavaScriptPro PackageIndividual Packages

Individual Packages

For smaller bundle sizes, you can install only the specific icon packs you need. All packages are scoped under @boxicons-pro.

Package Naming Convention

@boxicons-pro/js-{pack}-{style}[-{weight}]
  • Weight is omitted for normal (400) weight
  • thin suffix for 200 weight
  • bold suffix for 700 weight

Available Packages

Basic Icons

npm install @boxicons-pro/js-basic-regular
npm install @boxicons-pro/js-basic-regular-thin
npm install @boxicons-pro/js-basic-regular-bold
npm install @boxicons-pro/js-basic-rounded
npm install @boxicons-pro/js-basic-rounded-thin
npm install @boxicons-pro/js-basic-rounded-bold
npm install @boxicons-pro/js-basic-sharp
npm install @boxicons-pro/js-basic-sharp-thin
npm install @boxicons-pro/js-basic-sharp-bold

Filled Icons

npm install @boxicons-pro/js-filled-regular
npm install @boxicons-pro/js-filled-regular-thin
npm install @boxicons-pro/js-filled-regular-bold
npm install @boxicons-pro/js-filled-rounded
npm install @boxicons-pro/js-filled-sharp
# ... and more

Duotone Icons

npm install @boxicons-pro/js-duotone-regular
npm install @boxicons-pro/js-duotone-regular-thin
npm install @boxicons-pro/js-duotone-regular-bold
npm install @boxicons-pro/js-duotone-rounded
npm install @boxicons-pro/js-duotone-sharp
# ... and more

Brands

npm install @boxicons-pro/js-brands

Usage with Individual Packages

// Import from specific packages
import { Alarm } from '@boxicons-pro/js-basic-regular';
import { Heart } from '@boxicons-pro/js-filled-rounded-bold';
import { Bell } from '@boxicons-pro/js-duotone-solid-sharp-thin';
import { Github } from '@boxicons-pro/js-brands';
import { createSvgString } from '@boxicons-pro/js';
 
// Use the icons
const alarmSvg = createSvgString(Alarm, { size: 'lg' });
const heartSvg = createSvgString(Heart, { size: 'lg', fill: 'red' });
const bellSvg = createSvgString(Bell, { 
  size: 'lg', 
  primaryFill: '#3b82f6', 
  secondaryFill: '#93c5fd' 
});
const githubSvg = createSvgString(Github, { size: 'lg' });

Benefits

  • Smaller bundle size: Only include the exact icon variants you need
  • Faster builds: Less code to process and bundle
  • Better tree-shaking: Pre-filtered packages are easier for bundlers to optimize
  • Type safety: Each package has its own TypeScript definitions
InstallColors