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!

The icons come in three shapes: a web-font with CSS, the plain SVG files, and a WordPress plugin.

Installation

npm (npmjs.org)

$ npm install openwebicons

Usage

Include the CSS in your project:

<link rel="stylesheet" href="node_modules/openwebicons/css/openwebicons.min.css">

Then use icons with CSS classes:

<i class="icon-html5"></i>
<i class="icon-mastodon"></i>
<i class="icon-activitypub"></i>
<i class="icon-fediverse"></i>

For colored variants, append -colored:

<i class="icon-html5-colored"></i>
<i class="icon-mastodon-colored"></i>

WordPress

The repository is also a WordPress plugin. It registers every icon with the icon library that came with WordPress 7.1, so you can pick them in the Icon block like any other icon. It loads no font and no stylesheet, the icons are plain SVG and follow the text color.

There is no release on wordpress.org yet. Build the zip with npm run build:plugin and install it from dist/openwebicons.zip, or take it from a release once one is tagged.

To render an icon in a template:

<?php echo wp_get_icon( 'openwebicons/activitypub', array( 'size' => 32 ) ); ?>

Building from Source

npm install
npm run build

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

Build Steps

Other Commands

Contributing

Adding a new icon:

1. Add your SVG to svg/ (viewBox "-10 0 1034 1024", fill="currentColor")
2. Run npm run normalize:svg, WordPress strips groups and transforms, so the paths have to be flat
3. Add an entry to icons.json with a label, the next available codepoint and an optional color
4. Run npm run validate and npm run build
5. Commit the SVG, icons.json, and all generated output files
6. Open a PR

See CONTRIBUTING.md for the details.

Project Page

Browse all icons: https://pfefferle.dev/openwebicons/