703 Icons released as WOFF2 (24KB) and SVG (20KB)

Usage

Picon is a ligature-based icon font, and so, it does not require any external CSS stylesheet, or any javascript.

Import it:

@font-face { font-family :picon; src : url (//yne.fr/picon/Picon-Regular.woff2); }

Declare it the way you like it, here is some examples:

/* the safe */ . picon { font-family :picon; } /* the brave */ i { font-family :picon; } /* the markdown lover */ del { font-family :picon; text-decoration : none;}

Use it :

< del > app </ del >

to get the app app icon

Hackable

Picon is under SIL Open Font License 1.1 Licencied, so you can

rebuild your own version

use it in any commercial project

modify it

redistribute/sell it (if you can)

Pico sized

Picon strive to be:

the lightest iconset Name Avg. SVGs sizes Picon 144 Bytes Feather 378 Bytes Material 479 Bytes Jam 535 Bytes Fontawesome 754 Bytes Clarity 916 Bytes Entypo 1070 Bytes Those values have been computed using the following line find -name ' *.svg ' -printf ' %s

' | awk ' {s+=$0} END {printf s/NR} '

Font

If want to have icons on your website, you may hesistate between using a couple of SVG, or importing a for or simply use unicode glyphs.

Picon is available as SVGs or as a font. But font format offer the following advantages:

it will assure you to have a reproducible result on any plateform (unlike unicode).

result on any plateform (unlike unicode). it can bundle many icons while being lightweight because of it binary and compressed format (unlike SVG).

because of it binary and compressed format (unlike SVG). it can be used in text-only section like input placeholder or pseudo element (unlike SVG).

section like input placeholder or pseudo element (unlike SVG). it can be colored to match your style (unlike unicode or SVG that needs to be embedded to do that).

to match your style (unlike unicode or SVG that needs to be embedded to do that). it can have any brand logo or custom icon you may need (unlike Unicode)

Criteria Uni SVG Font Coloration ✗ ✗ ✓ Lightweight ✓ ✗ ✓ Reproductible ✗ ✓ ✓ Custom Glyph ✗ ✓ ✓ Text-based ✓ ✗ ✓ Multi-shade ✓ ✓ ✗

Secret snippets

The following are for advanced users only.

Animation Because why not @keyframes wifi { 0 % , 100%{ content : 'wifi-0' } 20 % { content : 'wifi-1' } 40 % { content : 'wifi-2' } 60 % { content : 'wifi-3' } 80 % { content : 'wifi-4' } } . wifi : after { font-family :Picon; content : 'wifi-4' ; animation : wifi 1 s infinite; }

Icons in my form ? Any HTML element that display text (reset button, select ...) can also display Picon icons: < input type = reset class = picon value = cross > < select > < optgroup label = iconless > < option > wifi-0 </ optgroup > < optgroup class = picon label =" wifi-0 " > < option > wifi-0 < option > wifi-4 </ optgroup > </ select >

attribut based icon Display the language icon of a <pre lang=js>var i=0</pre> : pre [ lang ]: after { font-family :Picon; content : 'lang-' attr (lang); float :right; }

Icon stacking You can stack multiple icons with the following CSS snippet: [ data-picon ]{ position : relative; font-size : 32 px ; } [ data-picon ]: after { content : attr (data-picon); position : absolute; left : 0 ; text-shadow : 0 -2px white; } Example: Stack a cross icon over a volume icon: < del data-picon = cross > volume </ del >

ICONS