boxicons
Advanced tools
Readme
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.3!
To install via npm, simply do the following:
$ npm install boxicons --save
import the module
import 'boxicons';
<head><head>
<link rel="stylesheet" href="boxicons.min.css">
</head>
Instead of installing you may use the remote version
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!-- or -->
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
<i class="bx bx-hot"></i>
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>
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="https://unpkg.com/boxicons@2.1.3/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="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:
<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..."
pull = "left|right"
></box-icon>
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:
xs, sm, md, lg60px)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: //unpkg.com/boxicons@1.5.2/svg (no trailing forward slash)
getIconSvg(iconName): method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).
This project exists thanks to all the people who contribute. [Contribute].
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]
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
FAQs
High Quality Web Icons
The npm package boxicons receives a total of 141,182 weekly downloads. As such, boxicons popularity was classified as popular.
We found that boxicons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.