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
Tips: replace solid with the iconset you want (ex: flags)
<!-- SVG: for casual usage -->
<img src="//unpkg.com/picon/solid/app.svg" alt="app">
<!-- Sprites: for massive usage -->
<svg><use xlink: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>
<span class=picon>app</span>Tips: Always use a versioned CDN url (ex:
https://unpkg.com/[email protected]/solid/...) for production
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;
}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 -1px 0 white,
-1px -0px 0 white,
-1px 1px 0 white,
-0px -1px 0 white,
-0px -0px 0 white,
-0px 1px 0 white,
1px -1px 0 white,
1px -0px 0 white,
1px 1px 0 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
delwithsor.piconaccording 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>As opposed to SVG, ligatured font can be used in text-only elements (<option>, <input> ...):
<input type=reset class=picon value=cross>
<select>
<optgroup label=iconless>
<option>wifi0
</optgroup>
<optgroup class=picon label="wifi0">
<option>wifi0
<option>wifi4
</optgroup>
</select>Font can react from states and attributes.
For example it can automatically display the corresponding language icon to a <pre> element:
<pre lang=js>
function example(){
return 0;
}
</pre>
<style>
pre[lang]::before{
font-family: picon;
content: attr(lang);
float: right;
}
</style>It can also help to unify browser style for input typefile/checkbox/radio:
<input type=file data-before=file style=width:1em>
<input type=checkbox data-before=ballot data-before-checked=checked style=appearance:none>
<input type=radio data-before=false data-before-checked=true style=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><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">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>
<button onclick="disabled=true">Upload</button>Note:
::beforeand::afterpseudo-element only work on HTML elements that accept children (<input>withtypeset totext,button)