Easy Hackable PicoIcon Font

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

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\n' | awk '{s+=$0} END {printf s/NR}'
readable down to 8px * 8px
Iconset 🖼 📞 🔈 🕷️
Clarity pic-clarity phone-clarity vol-clarity bug-clarity
Feather pic-feather phone-feather vol-feather bug-feather
Fontawesome pic-fawesom phone-fawesom vol-fawesom bug-fawesom
Jam pic-jamicon phone-jamicon vol-jamicon bug-jamicon
Material pic-materia phone-materia vol-materia bug-materia
Picon pic-picon  phone-picon  vol-picon  bug-picon
Entypo pic-entypo phone-entypo vol-entypo bug-entypo

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:

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 1s 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:32px;
}
[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

Try It

Generate your font, then try it by pasting some icon names