Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atisawd/boxicons

High Quality web friendly icons
https://github.com/atisawd/boxicons

icon-font icon-pack icons svg svg-icons

Last synced: 25 days ago
JSON representation

High Quality web friendly icons

Host: GitHub
URL: https://github.com/atisawd/boxicons
Owner: atisawd
License: mit
Created: 2018-06-15T07:53:05.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-01-26T17:42:46.000Z (10 months ago)
Last Synced: 2024-04-14T02:28:28.742Z (7 months ago)
Topics: icon-font, icon-pack, icons, svg, svg-icons
Language: CSS
Homepage: https://boxicons.com
Size: 22.1 MB
Stars: 2,721
Watchers: 26
Forks: 261
Open Issues: 627
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome - atisawd/boxicons - High Quality web friendly icons (CSS)
my-awesome-list - boxicons
awesome-icons - Boxicons - Simple vector iconset with 1000+ icons and 100+ logos. ([Website](https://boxicons.com/)) (General)
awesome-iconjar - BoxIcons - 12-04 | 2021-12-06 | CC 4.0 | (IconSet Included)
awesome-starred - atisawd/boxicons - High Quality web friendly icons (icon-font)

README

        # boxicons 

[![Financial Contributors on Open Collective](https://opencollective.com/boxicons/all/badge.svg?label=financial+contributors)](https://opencollective.com/boxicons) [![GitHub issues](https://img.shields.io/github/issues/atisawd/boxicons.svg)](https://github.com/atisawd/boxicons/issues)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/atisawd/boxicons.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fatisawd%2Fboxicons)

[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/atisawd)

_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!_

- Fixed the errors with a few svgs, added viewbox

- Added 34 new icons

## Installation

To install via npm, simply do the following:

```bash

$ npm install boxicons --save

```

import the module

```javscript

import 'boxicons';

```

## 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-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:

```html







```

### 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

```

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

 ```html

```                  

The `` custom element supports the following attributes:

```html

```

-   `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: `//unpkg.com/[email protected]/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).

[Check out all the icons here!](https://boxicons.com)

## Contributors

### Code Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].



### Financial Contributors

Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/boxicons/contribute)]

#### Individuals



#### Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/boxicons/contribute)]





















## License

- 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!](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)