The Pico-icon set

Download | Icon finder | Flags color demo | Editor

• ~900 libre icons released as ligatured Font, SVG, PNG, and JSON icomoon project, compare
• Hackable: Update or remove any svg, then simply rebuild with make all! You can also use Icomoon (can't handle coloring).
• Lightweight: Average SVGs are 5x lighter than Fontawesome, source
• Designed on a 8-grid: to be readable at 8px 16px 24px 32px 48px ... demo
• Thousand of icon composition possible
• CDN backed via unpkg.com and jsdelivr.net
• Multicolor support ! Example

Usage

Tips: replace solid with the iconset you want (ex: flags)

<!-- SVG: for casual usage --><imgsrc="//unpkg.com/picon/solid/app.svg" alt="app"><!-- Sprites: for massive usage --><svg><usexlink:href="//unpkg.com/picon/solid.svg#app"></use></svg><!-- Font: for ligature junky --><style>@font-face {
src:url(https://unpkg.com/picon);
font-family: picon;
}
.picon { font-family: picon; }
</style><spanclass=picon>app</span>

Tips: Always use a versioned CDN url (ex: https://unpkg.com/picon@21.5.5/solid/...) for production

Mardown Integration

If you don't need the ~~strikeout~~ mardown feature you can create a rule to show striked text as icons:

del,s {
font-family:picon; text-decoration: none;
}

Live Demo

Composition

To stay lightweight, Picon does not provide any composed icons like call-in, call-out, call-forward.

Following the previous Mardown <del> example, you can compose using:

<style>del {
font-family: picon;
word-spacing:-2em; /* Same size overlay */text-decoration: none; /* un-strike */text-shadow:/* white halo */-1px-1px0 white,-1px-0px0 white,-1px1px0 white,-0px-1px0 white,-0px-0px0 white,-0px1px0 white,1px-1px0 white,1px-0px0 white,1px1px0 white;
}
del>sup,del>sub{
font-size:.5em; /* twice smaller */margin-left:-1em; /* right side*/
}
del>sup{vertical-align:text-top;}
del>sub{vertical-align:text-bottom;}
</style>

Note: replace del with s or .picon according to your Mardown processor

you can now associate any parent with any child icon:

<del>microphone not</del><del>wifi4<sub>!</sub></del><del>printer<sub>magnifier</sub></del><del>bluetooth<sub>add</sub></del><del>gsm0<sub>chain</sub></del><del>wifi4<sub>5g</sub></del><del>lock<sub>warning</sub></del><del>file<sub>attachment</sub></del><del>calendar<sub>add</sub></del><del>battery<sub>bolt</sub></del><del>file<sub>markdown</sub></del><del>call<sup>rightward</sup></del><del>drive<sub>wrench</sub></del><del>screen<sub>colors</sub></del><del>picture<sub>contrast</sub></del>

Live Demo

HTML text element

As opposed to SVG, ligatured font can be used in text-only elements (<option>, <input> ...):

<inputtype=resetclass=piconvalue=cross><select><optgrouplabel=iconless><option>wifi0
</optgroup><optgroupclass=piconlabel="wifi0"><option>wifi0
<option>wifi4
</optgroup></select>

Live Demo

Pseudo-element

Font can react from states and attributes.

For example it can automatically display the corresponding language icon to a <pre> element:

<prelang=js>
function example(){
return 0;
}
</pre><style>pre[lang]::before{
font-family: picon;
content:attr(lang);
float: right;
}
</style>

Live Demo

It can also help to unify browser style for input typefile/checkbox/radio:

<inputtype=filedata-before=filestyle=width:1em><inputtype=checkboxdata-before=ballotdata-before-checked=checkedstyle=appearance:none><inputtype=radiodata-before=falsedata-before-checked=truestyle=appearance:none><style>
[data-before]::before{
font-family: picon;
content:attr(data-before);
}
[data-before-checked]:checked::before{
font-family: picon;
content:attr(data-before-checked);
}
</style>

Live Demo

Color gradient

<style>
.rainbow{
background: linear-gradient(
#5eb544 00.0% 37.5%,
#f5b226 37.5% 50.0%,
#ed7e1e 50.0% 62.5%,
#d9383c 62.5% 75.0%,
#913b92 75.0% 87.5%,
#0098d5 87.5% 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<style>
<input type=search class="picon rainbow">

Live Demo

Animation

Add a hourglass spinner to any disabled button

<style>@font-face {
src:url(https://unpkg.com/picon);
font-family: picon;
}
@keyframes hourglass {
0%{content:'hourglass1'}
10%{content:'hourglass2'}
20%{content:'hourglass3'}
30%{content:'hourglass4'}
40%{content:'hourglass5'}
50%{content:'hourglass5'}
60%{content:'hourglass6'}
70%{content:'hourglass7'}
80%{content:'hourglass8'}
}
button:disabled::after{
font-family: picon;
content:'hourglass1';
animation: hourglass 1s infinite;
}
</style><buttononclick="disabled=true">Upload</button>

Live Demo

Note: ::before and ::after pseudo-element only work on HTML elements that accept children (<input> with type set to text,button)