16pxls

Born out of a need for an icon set that would align well in vertical and horizontal lists. Great for navigation, buttons, headings or lists. If you are obsessed with things lining up, then this icon set is perfect for you!

v2

Version 2 drops the icon font and PNG/JPG output in favour of SVG only: an SVG sprite, individual SVG files, and a CSS file for background-image classes. v1 (icon font, PNG, JPG) is still published on npm as 16pxls@1 if you need it.

Documentation

Icon names are listed in dist/docs/assets/json/iconList.json.

Installation

npm install 16pxls or yarn add 16pxls

Usage

CSS background classes

<link rel="stylesheet" href="node_modules/16pxls/dist/css/16pxls.css"> or @import '16pxls/css';

<span class="icon icon-Skull"></span>

SVG sprite

<svg class="icon"><use href="node_modules/16pxls/dist/sprite.svg#icon-Skull"></use></svg>

Individual SVGs

Import a single icon directly, e.g. with a bundler: import skull from '16pxls/svg/Skull.svg'.

Building from source

npm install, then npm run build. Reads raw SVGs from src/svg, writes optimised SVGs, the sprite, the CSS and the icon list to dist/.

Included File Types

• .SVG
• .CSS
• .FIG (for Figma)

License

CC-BY-SA-4.0