Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/twbs/icons

Official open source SVG icon library for Bootstrap.
https://github.com/twbs/icons

bootstrap font icons sprite svg woff woff2

Last synced: 10 days ago
JSON representation

Official open source SVG icon library for Bootstrap.

Host: GitHub
URL: https://github.com/twbs/icons
Owner: twbs
License: mit
Created: 2019-07-25T17:59:58.000Z (over 5 years ago)
Default Branch: main
Last Pushed: 2024-04-02T15:42:07.000Z (7 months ago)
Last Synced: 2024-04-13T23:13:59.613Z (7 months ago)
Topics: bootstrap, font, icons, sprite, svg, woff, woff2
Language: JavaScript
Homepage: https://icons.getbootstrap.com
Size: 64.6 MB
Stars: 7,133
Watchers: 142
Forks: 1,047
Open Issues: 376
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-icons - Bootstrap Icons - SVG icons custom designed and built for Bootstrap components. ([Website](https://icons.getbootstrap.com/)) (General)
awesome-starts - twbs/icons - Official open source SVG icon library for Bootstrap. (HTML)
awesome-iconjar - Bootstrap Icons - 01-03 | 2024-05-13 | MIT | (IconSet Included)
awesome-list - icons

README

Bootstrap Icons

Official open source SVG icon library for Bootstrap with over 2,000 icons.

Explore Bootstrap Icons »

Bootstrap
·
Themes
·
Blog

[![Bootstrap Icons preview](https://github.com/twbs/icons/blob/main/.github/preview.png)](https://icons.getbootstrap.com/)

## Install

Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. [Read our docs](https://icons.getbootstrap.com/) for usage instructions.

```shell
npm i bootstrap-icons
```

For those [using Packagist](https://packagist.org/packages/twbs/bootstrap-icons), you can also install Bootstrap Icons via Composer:

```shell
composer require twbs/bootstrap-icons
```

[Also available in Figma](https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons).

## Usage

Depending on your setup, you can include Bootstrap Icons in a handful of ways.

- Copy-paste SVGs as embedded HTML
- Reference via `` element
- Use the SVG sprite
- Include via CSS

[See the docs for more information](https://icons.getbootstrap.com/#usage).

## Development

[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/icons/test.yml?branch=main&label=Tests&logo=github)](https://github.com/twbs/icons/actions/workflows/test.yml?query=workflow%3ATests+branch%3Amain)
[![npm version](https://img.shields.io/npm/v/bootstrap-icons?logo=npm&logoColor=fff)](https://www.npmjs.com/package/bootstrap-icons)

Clone the repo, install dependencies, and start the Hugo server locally.

```shell
git clone https://github.com/twbs/icons/
cd icons
npm i
npm start
```

Then open `http://localhost:4000` in your browser.

### npm scripts

Here are some key scripts you'll use during development. Be sure to look to our `package.json` or `npm run` output for a complete list of scripts.

| Script | Description |
|--------------|-------------------------------------------------------------------------------|
| `start` | Alias for running `docs-serve` |
| `docs-serve` | Starts a local Hugo server |
| `pages` | Generates permalink pages for each icon with template Markdown |
| `icons` | Processes and optimizes SVGs in `icons` directory, generates fonts and sprite |

## Adding SVGs

Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with `fill` (no stroke). Once a new SVG icon has been added to the `icons` directory, we use an npm script to:

1. Optimize our SVGs with SVGO.
2. Modify the SVGs source code, removing all attributes before setting new attributes and values in our preferred order.

Use `npm run icons` to run the script, run `npm run pages` to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.

**Warning**: Please exclude any auto-generated files, like `font/**` and `bootstrap-icons.svg` from your branch because they cause conflicts, and we generally update the dist files before a release.

## Publishing

Documentation is published automatically when a new Git tag is published. See our [GitHub Actions](https://github.com/twbs/icons/tree/main/.github/workflows) and [`package.json`](https://github.com/twbs/icons/blob/main/package.json) for more information.

## License

[MIT](LICENSE)

## Author

[@mdo](https://github.com/mdo)