2.1.2 • Public • Published


    Financial Contributors on Open Collective GitHub issues Twitter Donate

    High Quality web friendly icons

    'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.

    Announcing Boxicons v2.1.2!

    • Fixed the errors with a few svgs, added viewbox
    • Added 22 new icons


    To install via npm, simply do the following:

    $ npm install boxicons --save

    import the module

    import 'boxicons';


    Using via CSS

    1. Include the stylesheet on your document's <head>
      <link rel="stylesheet" href="boxicons.min.css">

    Instead of installing you may use the remote version

      <link rel="stylesheet"
      <!-- or -->
      <link rel="stylesheet"
    1. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:
    <i class="bx bx-hot"></i>
    <i class="bx bxs-hot"></i>
    <i class="bx bxl-facebook-square"></i>

    Using via Web Component

    Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the box-icon-element.js file to the page:

    <script src=""></script>

    To use an icon, add the <box-icon> element to the location where the icon should be displayed:

    <box-icon name="hot"></box-icon>

    To use solid icons or logos add attribute type as solid or logo before the name

    <box-icon type="solid" name="hot"></box-icon>
    <box-icon type="logo" name="facebook-square"></box-icon>

    The <box-icon> custom element supports the following attributes:

        type = "regular|solid|logo"
        pull = "left|right"
    • type: Should always be first and be one of the following values: regular,solid, logo

    • name : (REQUIRED) the name of the icon to be displayed

    • color: A color for the icon.

    • size: The size for the icon. It supports one of two types of values:

      • One of the following shortcuts: xs, sm, md, lg
      • A css unit size (ex. 60px)
    • rotate: one of the following values: 90, 180, 270

    • flip: one of the following values: horizontal, vertical

    • border: one of the following values: square, circle

    • animation: One of the following values: spin, tada, flashing, burst, fade-left, fade-right, spin-hover, tada-hover, flashing-hover, burst-hover, fade-left-hover, fade-right-hover

    • pull: one of the following values: left,right The Custom Element class (BoxIconElement) exposes the following static members:

    • tagName: property that holds the HTML element tag name. Default: box-icon

    • defined([tagName]): Defines the Element in the custom element registry using either the tagName provided on input or the (default) the one defined on the Class.

    • cdnUrl: property that holds the URL that will be used to retrieve the images. URL should point to the folder that contains the images. example: // (no trailing forward slash)

    • getIconSvg(iconName): method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).

    Check out all the icons here!


    Code Contributors

    This project exists thanks to all the people who contribute. [Contribute].

    Financial Contributors

    Become a financial contributor and help us sustain our community. [Contribute]



    Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]


    • The icons (.svg) files are free to download and are licensed under CC 4.0 By downloading it is assumed that you agree with the terms mentioned in CC 4.0.
    • The fonts files are licensed under SIL OFL 1.1.
    • Attribution is not required but is appreciated.
    • Other files which are not fonts or icons are licensed under the MIT License.

    You can read more about the license here!


    Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues.

    Caught a mistake or want to contribute to the documentation? Edit this page on Github




    npm i boxicons

    DownloadsWeekly Downloads





    (CC-BY-4.0 OR OFL-1.1 OR MIT)

    Unpacked Size

    3.65 MB

    Total Files


    Last publish


    • bluelion4