Switching to boxicons is easy and can be done in 2 steps. There are more features than just the icons set. Boxicons also follows the official Google Material Design guidelines
Quick Start
Looking to quickly add Boxicons to your project? Use the paths to CDN or Download the files here.
Install via NPM
Install the boxicons package by copy pasting the following in your terminal:
$ npm install boxicons --save
Import the npm module in your javascript
import 'boxicons'
Using the Web Component
Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the boxicons.js file to the page:
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
To use an icon, add the box-icon element to the location where the icon should be displayed:
<box-icon name="rocket"></box-icon>
To use solid icons or logos add attribute type as solid or logo
<box-icon type="solid" name="rocket"></box-icon> <box-icon type="logo" name="facebook-square"></box-icon>
The box-icon custom element supports the following attributes:
<box-icon type = "regular|solid|logo" name="adjust|alarms|etc...." color="blue|red|etc..." size="xs|sm|md|lg|cssSize" rotate="90|180|270" flip="horizontal|vertical" border="square|circle" animation="spin|tada|etc..." animation="spin|tada|etc..." pull = "left|right"></box-icon>
Usage as a Font
Import the CSS
Copy-paste the stylesheet link into your head to load our CSS
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
This will load boxicons font into your webpage
HTML
To use an icon on your page, add a prefix bx- for regular icons, bxs- for solid icons & bxl- for logos followed by the icon name and seperate class with the bx:
<i class='bx bx-user'></i> <i class='bx bxs-user'></i> <i class='bx bxl-facebook-square'></i>
You can see the names of all the icons here
Starter Templates
Create an HTML document and copy-paste the starter template
<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <!-- Boxicons CSS --> <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> <title>Hello, Boxicons!</title> </head> <body> <h1>Hello, Boxicons!</h1> <i class='bx bx-hot'></i> <i class='bx bxs-hot'></i> <i class='bx bxl-facebook-square'></i> </body> </html>
A template for usage with the web component instead of icon font
<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <!-- Boxicons JS --> <link href='https://unpkg.com/[email protected]/dist/boxicons.js' rel='stylesheet'> <title>Hello, Boxicons!</title> </head> <body> <h1>Hello, Boxicons!</h1> <box-icon name='hot'></box-icon> <box-icon type='solid' name='hot'></box-icon> <box-icon type='logo' name='facebook-square'></box-icon> </body> </html>
Styling
Sizing
You can change size of the icon with font-size CSS. It will inherit the font-size from the parent by default. There are fixed sizes you can add to the icon by adding classes bx-xs, bx-sm, bx-md and bx-lg
Rotation & Flipping
Rotate the icons using classes bx-rotate-90, bx-rotate-180 and bx-rotate-270 or Flip the icons using bx-flip-horizontal and bx-flip-vertical
List Icons
Use icons as bullets for the list by adding class bx-ul to the unordered list element and include the icons inside the li
Fixed Width
You can use fixed width class bx-fw to get a fixed width icon next to the text li
Pulled Icons
Use class bx-pull-left or bx-pull-right on icons for easy pull quotes li
The customer is very important, the customer will be followed by the customer. Ut faucibus erat eu nibh laoreet sed ullamcorper diam nare Everyone cartoons before and mourns. Everyone should pay for it. Everyone hates the ultrices laoreet, not the vestibulum lake molestie sollicitudinum. The fleet does not need the pain now, the members are comfortable or even eros.
Border
Add border to your icons with classes bx-border, bx-border-circle
Animation
Animate your icons with pre built CSS animations using classes bx-spin, bx-tada, bx-flashing, bx-burst, bx-fade-left and bx-fade-right
You can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS
Animation on Hover
Animate your icons on hover with pre built CSS animations using classes bx-spin-hover, bx-tada-hover, bx-flashing-hover, bx-burst-hover, bx-fade-left-hover and bx-fade-right-hover
You can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS
Contribution
Want to report a bug ? Have some suggestions or ideas ? Have an icon or a feature request? Create a new issue on Github with the appropriate label here
License
The MIT License (MIT)
Copyright (c) 2015-2023 Aniket Suvarna
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.