1<html>
2<head>
3  <link rel="stylesheet" type="text/css" href="microns.css" />
4  <title>Microns</title>
5  <meta name="description" content="The universal icon set for user interfaces.">
6  <style type="text/css">
7    * {
8      margin: 0;
9      padding: 0;
10    }
11
12    html,
13    body {
14      height: 100%;
15    }
16
17    body {
18      font-family: sans-serif;
19      font-size: 12px;
20      font-weight: bold;
21      background-color: #f3f5f6;
22      display: flex;
23      margin: auto;
24      text-align: center;
25    }
26
27    main {
28      margin: auto;
29      max-width: 720px;
30      padding: 20px;
31    }
32
33    ul {
34      list-style: none;
35      display: flex;
36      flex-wrap: wrap;
37      flex-direction: row;
38      justify-content: space-between;
39      margin: -8px;
40    }
41
42    p, hr {
43      margin: 12px 0;
44    }
45
46    li {
47      padding: 8px 6px;
48      min-width: 32px;
49    }
50
51    figcaption {
52      margin-top: 8px;
53      max-width: 60px;
54      overflow: hidden;
55      white-space: nowrap;
56      text-overflow: ellipsis;
57    }
58
59    img {
60      display: block;
61      height: 32px;
62      margin: auto;
63    }
64
65    .mu {
66      font-size: 32px;
67      line-height: 1;
68    }
69
70    a {
71      color: #456fff;
72    }
73
74    img, .mu {
75      display: none;
76    }
77
78    #radio-svg:checked ~ ul img {
79      display: block;
80    }
81
82    #radio-font:checked ~ ul .mu {
83      display: block;
84    }
85
86    #radio-svg:checked ~ label[for="#radio-svg"],
87    #radio-font:checked ~ label[for="#radio-font"] {
88      font-weight: bold;
89    }
90
91    label {
92      display: inline-block;
93      padding: 8px;
94      margin-bottom: 12px;
95    }
96
97  </style>
98</head>
99<body>
100  <main>
101    <h1>Microns</h1>
102    <p>The universal icon set for user interfaces.</p>
103    <hr>
104    <input id="radio-font" type="radio" name="switch" value="font" checked>
105    <label for="radio-font">Font</label>
106
107    <input id="radio-svg"  type="radio" name="switch" value="svg">
108    <label for="radio-svg">SVG</label>
109
110    <ul>
111        <li>
112          <figure title="arrow-left">
113            <img src="../svg/arrow-left.svg">
114            <span class="mu mu-arrow-left"></span>
115            <figcaption>arrow-left</figcaption>
116          </figure>
117        </li>
118        <li>
119          <figure title="arrow-right">
120            <img src="../svg/arrow-right.svg">
121            <span class="mu mu-arrow-right"></span>
122            <figcaption>arrow-right</figcaption>
123          </figure>
124        </li>
125        <li>
126          <figure title="arrow-up">
127            <img src="../svg/arrow-up.svg">
128            <span class="mu mu-arrow-up"></span>
129            <figcaption>arrow-up</figcaption>
130          </figure>
131        </li>
132        <li>
133          <figure title="arrow-down">
134            <img src="../svg/arrow-down.svg">
135            <span class="mu mu-arrow-down"></span>
136            <figcaption>arrow-down</figcaption>
137          </figure>
138        </li>
139        <li>
140          <figure title="left">
141            <img src="../svg/left.svg">
142            <span class="mu mu-left"></span>
143            <figcaption>left</figcaption>
144          </figure>
145        </li>
146        <li>
147          <figure title="right">
148            <img src="../svg/right.svg">
149            <span class="mu mu-right"></span>
150            <figcaption>right</figcaption>
151          </figure>
152        </li>
153        <li>
154          <figure title="up">
155            <img src="../svg/up.svg">
156            <span class="mu mu-up"></span>
157            <figcaption>up</figcaption>
158          </figure>
159        </li>
160        <li>
161          <figure title="down">
162            <img src="../svg/down.svg">
163            <span class="mu mu-down"></span>
164            <figcaption>down</figcaption>
165          </figure>
166        </li>
167        <li>
168          <figure title="upload">
169            <img src="../svg/upload.svg">
170            <span class="mu mu-upload"></span>
171            <figcaption>upload</figcaption>
172          </figure>
173        </li>
174        <li>
175          <figure title="download">
176            <img src="../svg/download.svg">
177            <span class="mu mu-download"></span>
178            <figcaption>download</figcaption>
179          </figure>
180        </li>
181        <li>
182          <figure title="undo">
183            <img src="../svg/undo.svg">
184            <span class="mu mu-undo"></span>
185            <figcaption>undo</figcaption>
186          </figure>
187        </li>
188        <li>
189          <figure title="redo">
190            <img src="../svg/redo.svg">
191            <span class="mu mu-redo"></span>
192            <figcaption>redo</figcaption>
193          </figure>
194        </li>
195        <li>
196          <figure title="replay">
197            <img src="../svg/replay.svg">
198            <span class="mu mu-replay"></span>
199            <figcaption>replay</figcaption>
200          </figure>
201        </li>
202        <li>
203          <figure title="plus">
204            <img src="../svg/plus.svg">
205            <span class="mu mu-plus"></span>
206            <figcaption>plus</figcaption>
207          </figure>
208        </li>
209        <li>
210          <figure title="minus">
211            <img src="../svg/minus.svg">
212            <span class="mu mu-minus"></span>
213            <figcaption>minus</figcaption>
214          </figure>
215        </li>
216        <li>
217          <figure title="caret">
218            <img src="../svg/caret.svg">
219            <span class="mu mu-caret"></span>
220            <figcaption>caret</figcaption>
221          </figure>
222        </li>
223        <li>
224          <figure title="caret-up">
225            <img src="../svg/caret-up.svg">
226            <span class="mu mu-caret-up"></span>
227            <figcaption>caret-up</figcaption>
228          </figure>
229        </li>
230        <li>
231          <figure title="caret-down">
232            <img src="../svg/caret-down.svg">
233            <span class="mu mu-caret-down"></span>
234            <figcaption>caret-down</figcaption>
235          </figure>
236        </li>
237        <li>
238          <figure title="i-left">
239            <img src="../svg/i-left.svg">
240            <span class="mu mu-i-left"></span>
241            <figcaption>i-left</figcaption>
242          </figure>
243        </li>
244        <li>
245          <figure title="i-right">
246            <img src="../svg/i-right.svg">
247            <span class="mu mu-i-right"></span>
248            <figcaption>i-right</figcaption>
249          </figure>
250        </li>
251        <li>
252          <figure title="i-up">
253            <img src="../svg/i-up.svg">
254            <span class="mu mu-i-up"></span>
255            <figcaption>i-up</figcaption>
256          </figure>
257        </li>
258        <li>
259          <figure title="i-down">
260            <img src="../svg/i-down.svg">
261            <span class="mu mu-i-down"></span>
262            <figcaption>i-down</figcaption>
263          </figure>
264        </li>
265        <li>
266          <figure title="i-plus">
267            <img src="../svg/i-plus.svg">
268            <span class="mu mu-i-plus"></span>
269            <figcaption>i-plus</figcaption>
270          </figure>
271        </li>
272        <li>
273          <figure title="i-minus">
274            <img src="../svg/i-minus.svg">
275            <span class="mu mu-i-minus"></span>
276            <figcaption>i-minus</figcaption>
277          </figure>
278        </li>
279        <li>
280          <figure title="i-tick">
281            <img src="../svg/i-tick.svg">
282            <span class="mu mu-i-tick"></span>
283            <figcaption>i-tick</figcaption>
284          </figure>
285        </li>
286        <li>
287          <figure title="i-cross">
288            <img src="../svg/i-cross.svg">
289            <span class="mu mu-i-cross"></span>
290            <figcaption>i-cross</figcaption>
291          </figure>
292        </li>
293        <li>
294          <figure title="i-bullet">
295            <img src="../svg/i-bullet.svg">
296            <span class="mu mu-i-bullet"></span>
297            <figcaption>i-bullet</figcaption>
298          </figure>
299        </li>
300        <li>
301          <figure title="i-asterisk">
302            <img src="../svg/i-asterisk.svg">
303            <span class="mu mu-i-asterisk"></span>
304            <figcaption>i-asterisk</figcaption>
305          </figure>
306        </li>
307        <li>
308          <figure title="play">
309            <img src="../svg/play.svg">
310            <span class="mu mu-play"></span>
311            <figcaption>play</figcaption>
312          </figure>
313        </li>
314        <li>
315          <figure title="pause">
316            <img src="../svg/pause.svg">
317            <span class="mu mu-pause"></span>
318            <figcaption>pause</figcaption>
319          </figure>
320        </li>
321        <li>
322          <figure title="subtitles">
323            <img src="../svg/subtitles.svg">
324            <span class="mu mu-subtitles"></span>
325            <figcaption>subtitles</figcaption>
326          </figure>
327        </li>
328        <li>
329          <figure title="vol-low">
330            <img src="../svg/vol-low.svg">
331            <span class="mu mu-vol-low"></span>
332            <figcaption>vol-low</figcaption>
333          </figure>
334        </li>
335        <li>
336          <figure title="vol-mid">
337            <img src="../svg/vol-mid.svg">
338            <span class="mu mu-vol-mid"></span>
339            <figcaption>vol-mid</figcaption>
340          </figure>
341        </li>
342        <li>
343          <figure title="vol-high">
344            <img src="../svg/vol-high.svg">
345            <span class="mu mu-vol-high"></span>
346            <figcaption>vol-high</figcaption>
347          </figure>
348        </li>
349        <li>
350          <figure title="vol-mute">
351            <img src="../svg/vol-mute.svg">
352            <span class="mu mu-vol-mute"></span>
353            <figcaption>vol-mute</figcaption>
354          </figure>
355        </li>
356        <li>
357          <figure title="captions">
358            <img src="../svg/captions.svg">
359            <span class="mu mu-captions"></span>
360            <figcaption>captions</figcaption>
361          </figure>
362        </li>
363        <li>
364          <figure title="hd">
365            <img src="../svg/hd.svg">
366            <span class="mu mu-hd"></span>
367            <figcaption>hd</figcaption>
368          </figure>
369        </li>
370        <li>
371          <figure title="audio-description">
372            <img src="../svg/audio-description.svg">
373            <span class="mu mu-audio-description"></span>
374            <figcaption>audio-description</figcaption>
375          </figure>
376        </li>
377        <li>
378          <figure title="chart-line">
379            <img src="../svg/chart-line.svg">
380            <span class="mu mu-chart-line"></span>
381            <figcaption>chart-line</figcaption>
382          </figure>
383        </li>
384        <li>
385          <figure title="chart-bar">
386            <img src="../svg/chart-bar.svg">
387            <span class="mu mu-chart-bar"></span>
388            <figcaption>chart-bar</figcaption>
389          </figure>
390        </li>
391        <li>
392          <figure title="chart-scatter">
393            <img src="../svg/chart-scatter.svg">
394            <span class="mu mu-chart-scatter"></span>
395            <figcaption>chart-scatter</figcaption>
396          </figure>
397        </li>
398        <li>
399          <figure title="chart-pie">
400            <img src="../svg/chart-pie.svg">
401            <span class="mu mu-chart-pie"></span>
402            <figcaption>chart-pie</figcaption>
403          </figure>
404        </li>
405        <li>
406          <figure title="calendar">
407            <img src="../svg/calendar.svg">
408            <span class="mu mu-calendar"></span>
409            <figcaption>calendar</figcaption>
410          </figure>
411        </li>
412        <li>
413          <figure title="clock">
414            <img src="../svg/clock.svg">
415            <span class="mu mu-clock"></span>
416            <figcaption>clock</figcaption>
417          </figure>
418        </li>
419        <li>
420          <figure title="star">
421            <img src="../svg/star.svg">
422            <span class="mu mu-star"></span>
423            <figcaption>star</figcaption>
424          </figure>
425        </li>
426        <li>
427          <figure title="heart">
428            <img src="../svg/heart.svg">
429            <span class="mu mu-heart"></span>
430            <figcaption>heart</figcaption>
431          </figure>
432        </li>
433        <li>
434          <figure title="flag">
435            <img src="../svg/flag.svg">
436            <span class="mu mu-flag"></span>
437            <figcaption>flag</figcaption>
438          </figure>
439        </li>
440        <li>
441          <figure title="bookmark">
442            <img src="../svg/bookmark.svg">
443            <span class="mu mu-bookmark"></span>
444            <figcaption>bookmark</figcaption>
445          </figure>
446        </li>
447        <li>
448          <figure title="chat">
449            <img src="../svg/chat.svg">
450            <span class="mu mu-chat"></span>
451            <figcaption>chat</figcaption>
452          </figure>
453        </li>
454        <li>
455          <figure title="edit">
456            <img src="../svg/edit.svg">
457            <span class="mu mu-edit"></span>
458            <figcaption>edit</figcaption>
459          </figure>
460        </li>
461        <li>
462          <figure title="delete">
463            <img src="../svg/delete.svg">
464            <span class="mu mu-delete"></span>
465            <figcaption>delete</figcaption>
466          </figure>
467        </li>
468        <li>
469          <figure title="show">
470            <img src="../svg/show.svg">
471            <span class="mu mu-show"></span>
472            <figcaption>show</figcaption>
473          </figure>
474        </li>
475        <li>
476          <figure title="hide">
477            <img src="../svg/hide.svg">
478            <span class="mu mu-hide"></span>
479            <figcaption>hide</figcaption>
480          </figure>
481        </li>
482        <li>
483          <figure title="lock">
484            <img src="../svg/lock.svg">
485            <span class="mu mu-lock"></span>
486            <figcaption>lock</figcaption>
487          </figure>
488        </li>
489        <li>
490          <figure title="cog">
491            <img src="../svg/cog.svg">
492            <span class="mu mu-cog"></span>
493            <figcaption>cog</figcaption>
494          </figure>
495        </li>
496        <li>
497          <figure title="link">
498            <img src="../svg/link.svg">
499            <span class="mu mu-link"></span>
500            <figcaption>link</figcaption>
501          </figure>
502        </li>
503        <li>
504          <figure title="user">
505            <img src="../svg/user.svg">
506            <span class="mu mu-user"></span>
507            <figcaption>user</figcaption>
508          </figure>
509        </li>
510        <li>
511          <figure title="group">
512            <img src="../svg/group.svg">
513            <span class="mu mu-group"></span>
514            <figcaption>group</figcaption>
515          </figure>
516        </li>
517        <li>
518          <figure title="file">
519            <img src="../svg/file.svg">
520            <span class="mu mu-file"></span>
521            <figcaption>file</figcaption>
522          </figure>
523        </li>
524        <li>
525          <figure title="image">
526            <img src="../svg/image.svg">
527            <span class="mu mu-image"></span>
528            <figcaption>image</figcaption>
529          </figure>
530        </li>
531        <li>
532          <figure title="video">
533            <img src="../svg/video.svg">
534            <span class="mu mu-video"></span>
535            <figcaption>video</figcaption>
536          </figure>
537        </li>
538        <li>
539          <figure title="audio">
540            <img src="../svg/audio.svg">
541            <span class="mu mu-audio"></span>
542            <figcaption>audio</figcaption>
543          </figure>
544        </li>
545        <li>
546          <figure title="print">
547            <img src="../svg/print.svg">
548            <span class="mu mu-print"></span>
549            <figcaption>print</figcaption>
550          </figure>
551        </li>
552        <li>
553          <figure title="menu">
554            <img src="../svg/menu.svg">
555            <span class="mu mu-menu"></span>
556            <figcaption>menu</figcaption>
557          </figure>
558        </li>
559        <li>
560          <figure title="bars">
561            <img src="../svg/bars.svg">
562            <span class="mu mu-bars"></span>
563            <figcaption>bars</figcaption>
564          </figure>
565        </li>
566        <li>
567          <figure title="cancel">
568            <img src="../svg/cancel.svg">
569            <span class="mu mu-cancel"></span>
570            <figcaption>cancel</figcaption>
571          </figure>
572        </li>
573        <li>
574          <figure title="opts-h">
575            <img src="../svg/opts-h.svg">
576            <span class="mu mu-opts-h"></span>
577            <figcaption>opts-h</figcaption>
578          </figure>
579        </li>
580        <li>
581          <figure title="opts-v">
582            <img src="../svg/opts-v.svg">
583            <span class="mu mu-opts-v"></span>
584            <figcaption>opts-v</figcaption>
585          </figure>
586        </li>
587        <li>
588          <figure title="search">
589            <img src="../svg/search.svg">
590            <span class="mu mu-search"></span>
591            <figcaption>search</figcaption>
592          </figure>
593        </li>
594        <li>
595          <figure title="zoom-in">
596            <img src="../svg/zoom-in.svg">
597            <span class="mu mu-zoom-in"></span>
598            <figcaption>zoom-in</figcaption>
599          </figure>
600        </li>
601        <li>
602          <figure title="zoom-out">
603            <img src="../svg/zoom-out.svg">
604            <span class="mu mu-zoom-out"></span>
605            <figcaption>zoom-out</figcaption>
606          </figure>
607        </li>
608        <li>
609          <figure title="contract">
610            <img src="../svg/contract.svg">
611            <span class="mu mu-contract"></span>
612            <figcaption>contract</figcaption>
613          </figure>
614        </li>
615        <li>
616          <figure title="expand">
617            <img src="../svg/expand.svg">
618            <span class="mu mu-expand"></span>
619            <figcaption>expand</figcaption>
620          </figure>
621        </li>
622        <li>
623          <figure title="grid">
624            <img src="../svg/grid.svg">
625            <span class="mu mu-grid"></span>
626            <figcaption>grid</figcaption>
627          </figure>
628        </li>
629        <li>
630          <figure title="matrix">
631            <img src="../svg/matrix.svg">
632            <span class="mu mu-matrix"></span>
633            <figcaption>matrix</figcaption>
634          </figure>
635        </li>
636        <li>
637          <figure title="chapters">
638            <img src="../svg/chapters.svg">
639            <span class="mu mu-chapters"></span>
640            <figcaption>chapters</figcaption>
641          </figure>
642        </li>
643        <li>
644          <figure title="rss">
645            <img src="../svg/rss.svg">
646            <span class="mu mu-rss"></span>
647            <figcaption>rss</figcaption>
648          </figure>
649        </li>
650        <li>
651          <figure title="share">
652            <img src="../svg/share.svg">
653            <span class="mu mu-share"></span>
654            <figcaption>share</figcaption>
655          </figure>
656        </li>
657        <li>
658          <figure title="mail">
659            <img src="../svg/mail.svg">
660            <span class="mu mu-mail"></span>
661            <figcaption>mail</figcaption>
662          </figure>
663        </li>
664        <li>
665          <figure title="code">
666            <img src="../svg/code.svg">
667            <span class="mu mu-code"></span>
668            <figcaption>code</figcaption>
669          </figure>
670        </li>
671        <li>
672          <figure title="box">
673            <img src="../svg/box.svg">
674            <span class="mu mu-box"></span>
675            <figcaption>box</figcaption>
676          </figure>
677        </li>
678        <li>
679          <figure title="box-full">
680            <img src="../svg/box-full.svg">
681            <span class="mu mu-box-full"></span>
682            <figcaption>box-full</figcaption>
683          </figure>
684        </li>
685        <li>
686          <figure title="box-plus">
687            <img src="../svg/box-plus.svg">
688            <span class="mu mu-box-plus"></span>
689            <figcaption>box-plus</figcaption>
690          </figure>
691        </li>
692        <li>
693          <figure title="box-minus">
694            <img src="../svg/box-minus.svg">
695            <span class="mu mu-box-minus"></span>
696            <figcaption>box-minus</figcaption>
697          </figure>
698        </li>
699        <li>
700          <figure title="box-tick">
701            <img src="../svg/box-tick.svg">
702            <span class="mu mu-box-tick"></span>
703            <figcaption>box-tick</figcaption>
704          </figure>
705        </li>
706        <li>
707          <figure title="box-cross">
708            <img src="../svg/box-cross.svg">
709            <span class="mu mu-box-cross"></span>
710            <figcaption>box-cross</figcaption>
711          </figure>
712        </li>
713        <li>
714          <figure title="radio-off">
715            <img src="../svg/radio-off.svg">
716            <span class="mu mu-radio-off"></span>
717            <figcaption>radio-off</figcaption>
718          </figure>
719        </li>
720        <li>
721          <figure title="radio-on">
722            <img src="../svg/radio-on.svg">
723            <span class="mu mu-radio-on"></span>
724            <figcaption>radio-on</figcaption>
725          </figure>
726        </li>
727        <li>
728          <figure title="radio-full">
729            <img src="../svg/radio-full.svg">
730            <span class="mu mu-radio-full"></span>
731            <figcaption>radio-full</figcaption>
732          </figure>
733        </li>
734        <li>
735          <figure title="info">
736            <img src="../svg/info.svg">
737            <span class="mu mu-info"></span>
738            <figcaption>info</figcaption>
739          </figure>
740        </li>
741        <li>
742          <figure title="warn">
743            <img src="../svg/warn.svg">
744            <span class="mu mu-warn"></span>
745            <figcaption>warn</figcaption>
746          </figure>
747        </li>
748        <li>
749          <figure title="pass">
750            <img src="../svg/pass.svg">
751            <span class="mu mu-pass"></span>
752            <figcaption>pass</figcaption>
753          </figure>
754        </li>
755        <li>
756          <figure title="fail">
757            <img src="../svg/fail.svg">
758            <span class="mu mu-fail"></span>
759            <figcaption>fail</figcaption>
760          </figure>
761        </li>
762        <li>
763          <figure title="text">
764            <img src="../svg/text.svg">
765            <span class="mu mu-text"></span>
766            <figcaption>text</figcaption>
767          </figure>
768        </li>
769        <li>
770          <figure title="bold">
771            <img src="../svg/bold.svg">
772            <span class="mu mu-bold"></span>
773            <figcaption>bold</figcaption>
774          </figure>
775        </li>
776        <li>
777          <figure title="italic">
778            <img src="../svg/italic.svg">
779            <span class="mu mu-italic"></span>
780            <figcaption>italic</figcaption>
781          </figure>
782        </li>
783        <li>
784          <figure title="underline">
785            <img src="../svg/underline.svg">
786            <span class="mu mu-underline"></span>
787            <figcaption>underline</figcaption>
788          </figure>
789        </li>
790        <li>
791          <figure title="strikeout">
792            <img src="../svg/strikeout.svg">
793            <span class="mu mu-strikeout"></span>
794            <figcaption>strikeout</figcaption>
795          </figure>
796        </li>
797        <li>
798          <figure title="text-size">
799            <img src="../svg/text-size.svg">
800            <span class="mu mu-text-size"></span>
801            <figcaption>text-size</figcaption>
802          </figure>
803        </li>
804        <li>
805          <figure title="text-unstyle">
806            <img src="../svg/text-unstyle.svg">
807            <span class="mu mu-text-unstyle"></span>
808            <figcaption>text-unstyle</figcaption>
809          </figure>
810        </li>
811        <li>
812          <figure title="align-left">
813            <img src="../svg/align-left.svg">
814            <span class="mu mu-align-left"></span>
815            <figcaption>align-left</figcaption>
816          </figure>
817        </li>
818        <li>
819          <figure title="align-center">
820            <img src="../svg/align-center.svg">
821            <span class="mu mu-align-center"></span>
822            <figcaption>align-center</figcaption>
823          </figure>
824        </li>
825        <li>
826          <figure title="align-right">
827            <img src="../svg/align-right.svg">
828            <span class="mu mu-align-right"></span>
829            <figcaption>align-right</figcaption>
830          </figure>
831        </li>
832        <li>
833          <figure title="indent">
834            <img src="../svg/indent.svg">
835            <span class="mu mu-indent"></span>
836            <figcaption>indent</figcaption>
837          </figure>
838        </li>
839        <li>
840          <figure title="outdent">
841            <img src="../svg/outdent.svg">
842            <span class="mu mu-outdent"></span>
843            <figcaption>outdent</figcaption>
844          </figure>
845        </li>
846        <li>
847          <figure title="cloud">
848            <img src="../svg/cloud.svg">
849            <span class="mu mu-cloud"></span>
850            <figcaption>cloud</figcaption>
851          </figure>
852        </li>
853        <li>
854          <figure title="web">
855            <img src="../svg/web.svg">
856            <span class="mu mu-web"></span>
857            <figcaption>web</figcaption>
858          </figure>
859        </li>
860        <li>
861          <figure title="wifi">
862            <img src="../svg/wifi.svg">
863            <span class="mu mu-wifi"></span>
864            <figcaption>wifi</figcaption>
865          </figure>
866        </li>
867    </ul>
868    <hr>
869    <aside>
870      Made by <a href="https://www.s-ings.com/">Stephen Hutchings</a>
871    </aside>
872  </main>
873</body>
874</html>
875