# BoxIcons
[](https://github.com/atisawd/boxicons/issues)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fatisawd%2Fboxicons)
[](https://paypal.me/atisawd)
_High Quality web friendly icons_
'Boxicons' is a carefully designed open source iconset with 400+ icons. It's crafted to look enrich your website/app experience.
_Announcing Boxicons v1.1.0!_
14 more icons have been added to the list, and some pre built CSS classes to perform various functions like, rotate, animate and add border to the icons.
- A few bug fixes on the existing icons has been to make it pixel perfect.
You can check out the detailed documentation [here](https://boxicons.com/get-started)
## Installation
To install via npm, simply do the following:
```bash
$ npm install boxicons --save
```
import the module
```javscript
import 'boxicons/css/boxicons.css';
```
## Usage
### Using via CSS
1. Include the stylesheet on your document's ``
```html
```
Instead of installing you may use the remote version
```html
```
2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-':
```html
```
[Check out all the icons here!](https://boxicons.com)
### 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:
```html
```
To use an icon, add the `` element to the location where the icon should be displayed:
```html
```
The `` custom element supports the following attributes:
```html
```
- `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 followign 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`
- `shape`: 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`
## License
[You can read the license here!](https://boxicons.com/get-started#license)
## Contributing
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](https://github.com/atisawd/boxicons/blob/master/README.md)