A JavaScript library for Boxicons with full tree-shaking support, enabling efficient web icon usage.
@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.
Frontend developers building web applications who need a performant, customizable icon solution with minimal bundle impact.
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.
High Quality web friendly icons
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Fully tree-shakable architecture ensures only imported icons are bundled, as demonstrated by the explicit warning to avoid importing all icons to prevent bloating.
Seamlessly integrates with Shadow DOM and template tags via the root and inTemplates options, supporting component-based architectures without hacks.
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.
Provides createElement and createSvgString functions for dynamic SVG generation, enabling fine-grained control beyond auto-replacement.
Icons fail to render without JavaScript due to DOM auto-replacement, making it unsuitable for static sites or environments where JS is disabled.
Requires importing icons and calling getIcons even for simple static icons, adding complexity compared to drop-in SVG or font icon solutions.
Boxicons offers fewer total icons than alternatives like Font Awesome, which might not cover niche or specialized icon needs without manual additions.
Default aria-hidden='true' forces manual aria-label additions for screen readers, increasing development effort and risk of oversight.