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/picon@21.5.5/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)