PHPackages                             pfefferle/openwebicons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. pfefferle/openwebicons

ActiveComponent

pfefferle/openwebicons
======================

OpenWeb Icons

1.6.3(4y ago)85157108[2 issues](https://github.com/pfefferle/openwebicons/issues)[1 PRs](https://github.com/pfefferle/openwebicons/pulls)2OFL-1.1CSSCI passing

Since May 8Pushed 2mo ago62 watchersCompare

[ Source](https://github.com/pfefferle/openwebicons)[ Packagist](https://packagist.org/packages/pfefferle/openwebicons)[ Fund](https://notiz.blog/donate/)[ GitHub Sponsors](https://github.com/pfefferle)[ RSS](/packages/pfefferle-openwebicons/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)DependenciesVersions (16)Used By (2)

[![npm](https://camo.githubusercontent.com/fa319568be3ddce92385ef189542954c126ecc4d7d77679f0bfa0623077d2cbb/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6f70656e77656269636f6e732e737667)](https://www.npmjs.com/package/openwebicons) [![npm](https://camo.githubusercontent.com/aeecc50c369cd32574db8d4039b63f5d89093c6e4818775358b9ee11972c25de/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6f70656e77656269636f6e732e737667)](https://www.npmjs.com/package/openwebicons) [![npm](https://camo.githubusercontent.com/4a1cad59fa98bf2195bdbbf90939717f4925d30d99eb82b8568b9a34380e59e5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6f70656e77656269636f6e732e737667)](https://www.npmjs.com/package/openwebicons)

OpenWeb Icons
=============

[](#openweb-icons)

The *OpenWeb Icons* is a web-font that gives you scalable vector icons/logos of some open communities, standards or projects.

It includes the Creative Commons-, HTML5- and Microformats-icons for example. Use them to show your love for the *Open Web*!

Installation
------------

[](#installation)

npm ([npmjs.org](https://www.npmjs.org/package/openwebicons))

```
$ npm install openwebicons

```

Usage
-----

[](#usage)

Include the CSS in your project:

```

```

Then use icons with CSS classes:

```

```

For colored variants, append `-colored`:

```

```

Building from Source
--------------------

[](#building-from-source)

```
npm install
npm run build
```

This generates fonts, SCSS variables, CSS files, and the demo page.

### Build Steps

[](#build-steps)

CommandDescription`npm run build:fonts`Generate font files from SVGs + docs HTML via fantasticon`npm run build:scss`Generate `sass/_vars.scss` from `icons.json``npm run build:css`Compile SCSS to CSS (expanded + minified)`npm run build:docs`Copy CSS + fonts to `docs/` for GitHub Pages`npm run build`Run all of the above in sequenceContributing
------------

[](#contributing)

Adding a new icon:

1. Add your SVG to `svg/` (viewBox `"-10 0 1034 1024"`, `fill="currentColor"`)
2. Add an entry to `icons.json` with the next available codepoint and optional color
3. Run `npm run build`
4. Commit the SVG, `icons.json`, and all generated output files
5. Open a PR

Project Page
------------

[](#project-page)

Browse all icons:

---

[![NPM](https://camo.githubusercontent.com/8215c5cd505f379a5a32b6f2afa566e6123e578959f63e136b0e34ec1276a6d7/68747470733a2f2f6e6f6465692e636f2f6e706d2f6f70656e77656269636f6e732e706e673f646f776e6c6f6164733d747275652673746172733d74727565)](https://nodei.co/npm/openwebicons/)

###  Health Score

50

—

FairBetter than 96% of packages

Maintenance56

Moderate activity, may be stable

Popularity34

Limited adoption so far

Community29

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 97.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~202 days

Recently: every ~267 days

Total

14

Last Release

1755d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2e3d56273f319d19d7492f8ba06a01fd64a5724e3553b2d1f2ac0f4e399b2cfa?d=identicon)[pfefferle](/maintainers/pfefferle)

---

Top Contributors

[![pfefferle](https://avatars.githubusercontent.com/u/2373?v=4)](https://github.com/pfefferle "pfefferle (134 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![bananatron](https://avatars.githubusercontent.com/u/5759818?v=4)](https://github.com/bananatron "bananatron (1 commits)")[![RobLoach](https://avatars.githubusercontent.com/u/25086?v=4)](https://github.com/RobLoach "RobLoach (1 commits)")

---

Tags

fonthacktoberfesticon-fonticonsopenwebcssiconssassscssfontopenweb

### Embed Badge

![Health badge](/badges/pfefferle-openwebicons/health.svg)

```
[![Health](https://phpackages.com/badges/pfefferle-openwebicons/health.svg)](https://phpackages.com/packages/pfefferle-openwebicons)
```

###  Alternatives

[zurb/foundation

The most advanced responsive front-end framework in the world.

29.8k380.2k15](/packages/zurb-foundation)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[foundation/foundation-sites

The most advanced responsive front-end framework in the world.

29.8k8.4k](/packages/foundation-foundation-sites)[panique/php-sass

Compiles your SASS .scss files to .css every time your run your app (in development)

12280.0k](/packages/panique-php-sass)[panique/laravel-sass

Compiles your Sass .scss files to .css every time you run your app (in development)

73171.8k1](/packages/panique-laravel-sass)[efficiently/larasset

Larasset is a library for Laravel 5 which manage assets in an easy way.

684.8k](/packages/efficiently-larasset)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)