How to use @boxicons/js with React?

Import icons and use createElement to generate SVG elements, then render them in JSX. Avoid auto-replacement via data-bx in React due to virtual DOM conflicts; instead, programmatically create and insert icons as needed.

Boxicons vs Font Awesome: which is better for performance?

@boxicons/js excels in bundle efficiency with tree-shaking, reducing unused code, while Font Awesome often includes entire icon sets. However, Font Awesome offers more icons and wider community support, so choose based on icon variety vs. size constraints.

How to change icon colors in @boxicons/js?

Use the data-bx-fill attribute in HTML or the fill option in createElement. For example, sets red fill, or programmatically via createElement(Alarm, { fill: '#ff0000' }).

Does @boxicons/js support server-side rendering in Next.js?

No, it relies on client-side JavaScript for DOM auto-replacement, so icons won't render statically. For SSR, pre-generate SVG strings server-side using createSvgString and inject them into HTML, but this requires manual handling.

How to add animations to Boxicons?

The library doesn't include built-in animations; apply CSS animations or transitions to the SVG elements after insertion. Use classes or inline styles via attrs in getIcons or createElement for custom effects.

Can I use @boxicons/js with Vue.js components?

Yes, import icons and use createElement in Vue's lifecycle hooks or methods to generate SVGs. Avoid data-bx auto-replacement in Vue templates due to reactivity issues; instead, bind icons programmatically for better control.

Open-Awesome

Boxicons

MITTypeScript

A JavaScript library for Boxicons with full tree-shaking support, enabling efficient web icon usage.

Visit Website GitHub

3.2k stars320 forks0 contributors

What is Boxicons?

@boxicons/js is a JavaScript library that provides the Boxicons icon set as tree-shakable SVG icons for web projects. It solves the problem of bloated icon bundles by allowing developers to import only the icons they need, while offering automatic DOM replacement and extensive customization options.

Target Audience

Frontend developers building web applications who need a performant, customizable icon solution with minimal bundle impact.

Value Proposition

Developers choose @boxicons/js for its excellent tree-shaking support that eliminates unused icon code, its flexible API that works with modern web patterns like Shadow DOM, and its rich customization options through simple data attributes.

Overview

High Quality web friendly icons

Use Cases

Best For

Web applications requiring minimal bundle sizes for icon sets
Projects using component frameworks that benefit from tree-shaking
Applications with Shadow DOM or custom element architectures
Developers who need programmatic control over SVG icon generation
Teams wanting consistent, customizable icons across their UI
Performance-conscious projects where every kilobyte matters

Not Ideal For

Projects requiring server-side rendering without client-side JavaScript execution
Teams preferring CSS-based icon fonts for simpler, no-JS fallbacks
Applications with strict accessibility needs where default aria-hidden='true' is problematic
Developers using frameworks with integrated icon components (e.g., React-specific libraries) for tighter ecosystem fit

Pros & Cons

Pros

Bundle Size Efficiency

Fully tree-shakable architecture ensures only imported icons are bundled, as demonstrated by the explicit warning to avoid importing all icons to prevent bloating.

Modern Web Compatibility

Seamlessly integrates with Shadow DOM and template tags via the root and inTemplates options, supporting component-based architectures without hacks.

Declarative Customization

Extensive data attributes like data-bx-size, data-bx-fill, and data-bx-rotate allow styling directly in HTML without additional CSS, with presets for common use cases.

Programmatic Flexibility

Provides createElement and createSvgString functions for dynamic SVG generation, enabling fine-grained control beyond auto-replacement.

Cons

JavaScript Dependency

Icons fail to render without JavaScript due to DOM auto-replacement, making it unsuitable for static sites or environments where JS is disabled.

Boilerplate for Basic Use

Requires importing icons and calling getIcons even for simple static icons, adding complexity compared to drop-in SVG or font icon solutions.

Limited Icon Set Breadth

Boxicons offers fewer total icons than alternatives like Font Awesome, which might not cover niche or specialized icon needs without manual additions.

Accessibility Overhead

Default aria-hidden='true' forces manual aria-label additions for screen readers, increasing development effort and risk of oversight.

Frequently Asked Questions

Related Projects

Font Awesome

The iconic SVG, font, and CSS toolkit

Stars76,635

Forks12,205

Last commit3 months ago

Material design icons

Material Design icons by Google (Material Symbols)

Stars53,405

Forks9,729

Last commit3 days ago

Feather

Simply beautiful open-source icons

Stars25,931

Forks1,285

Last commit1 year ago

Heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.

Stars23,582

Forks1,316

Last commit27 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub