windows-10-icons
Version:
Windows 10 Icons
620 lines (555 loc) • 315 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>icons8-win10 glyphs preview</title>
<style>
/* Page Styles */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #444;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a,
a:visited {
color: #888;
text-decoration: underline;
}
a:hover,
a:focus { color: #000; }
header {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
overflow: hidden;
padding: 20px 0;
}
header h1 {
color: #888;
float: left;
font-size: 36px;
font-weight: 300;
}
header a {
float: right;
font-size: 14px;
}
.container {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
padding: 0 40px;
width: 90%;
}
.glyph {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.preview-glyphs { vertical-align: bottom; }
.preview-scale {
color: #888;
font-size: 12px;
margin-top: 5px;
}
.step {
display: inline-block;
line-height: 1;
position: relative;
width: 10%;
}
.step .letters,
.step i {
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.step:hover .letters { opacity: 1; }
.step:hover i { opacity: .3; }
.letters {
opacity: .3;
position: absolute;
}
.characters-off .letters { display: none; }
.characters-off .step:hover i { opacity: 1; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
.usage { margin-top: 10px; }
.usage input {
font-family: monospace;
margin-right: 3px;
padding: 2px 5px;
text-align: center;
}
.usage .class { width: 250px; }
.usage .case { margin: 40px 0; }
pre {
background-color: #fafafa;
padding: 8px 15px;
display: block;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333333;
border: 1px solid #eeeeee;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
pre.inline {
display: inline-block;
}
footer {
color: #888;
font-size: 12px;
padding: 20px 0;
}
</style>
<link rel="stylesheet" href="//maxcdn.icons8.com/fonts/icons8_win10/1.0./styles.min.css">
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
function toggleCharacters() {
var body = document.getElementsByTagName('body')[0];
body.className = body.className === 'characters-off' ? '' : 'characters-off';
}
</script>
</head>
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>icons8-win10 contains 234 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>
<div class="usage">
<div class="case">
<p><strong>Use our CDN</strong> to add Icons8 Windows10 font to your web page in one line. You don't even have to download or install anything!</p>
<p>Paste the following code into the <head> section of your site's HTML.</p>
<pre><code><link rel="stylesheet" href="//maxcdn.icons8.com/fonts/icons8_win10/1.0./styles.min.css"></code></pre>
</div>
<div class="case">
<p><strong>Download <a href="https://github.com/icons8/windows-10-icons/archive/v1.0.0.zip">ZIP</a> and extract</strong> the <em>font</em> directory</p>
<p>Paste the following code into the <head> section of your site's HTML.</p>
<pre><code><link rel="stylesheet" href="/path/to/font/styles.min.css"></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-add-shopping-cart" class="icons8-add-shopping-cart"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-add-shopping-cart" />
<pre class="inline"><code><i class="<strong>icons8-add-shopping-cart</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-add-user" class="icons8-add-user"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-add-user" />
<pre class="inline"><code><i class="<strong>icons8-add-user</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-adventures" class="icons8-adventures"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-adventures" />
<pre class="inline"><code><i class="<strong>icons8-adventures</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-advertising" class="icons8-advertising"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-advertising" />
<pre class="inline"><code><i class="<strong>icons8-advertising</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-airport" class="icons8-airport"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-airport" />
<pre class="inline"><code><i class="<strong>icons8-airport</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-align-center" class="icons8-align-center"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-align-center" />
<pre class="inline"><code><i class="<strong>icons8-align-center</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-align-justify" class="icons8-align-justify"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-align-justify" />
<pre class="inline"><code><i class="<strong>icons8-align-justify</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-align-left" class="icons8-align-left"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-align-left" />
<pre class="inline"><code><i class="<strong>icons8-align-left</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-align-right" class="icons8-align-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-align-right" />
<pre class="inline"><code><i class="<strong>icons8-align-right</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting" class="icons8-alphabetical-sorting"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-alphabetical-sorting" />
<pre class="inline"><code><i class="<strong>icons8-alphabetical-sorting</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-alphabetical-sorting-2" class="icons8-alphabetical-sorting-2"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-alphabetical-sorting-2" />
<pre class="inline"><code><i class="<strong>icons8-alphabetical-sorting-2</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-amex" class="icons8-amex"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-amex" />
<pre class="inline"><code><i class="<strong>icons8-amex</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-angle-down" class="icons8-angle-down"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-angle-down" />
<pre class="inline"><code><i class="<strong>icons8-angle-down</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-angle-left" class="icons8-angle-left"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-angle-left" />
<pre class="inline"><code><i class="<strong>icons8-angle-left</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-angle-right" class="icons8-angle-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-angle-right" />
<pre class="inline"><code><i class="<strong>icons8-angle-right</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-angle-up" class="icons8-angle-up"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-angle-up" />
<pre class="inline"><code><i class="<strong>icons8-angle-up</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-archive" class="icons8-archive"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-archive" />
<pre class="inline"><code><i class="<strong>icons8-archive</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-area-chart" class="icons8-area-chart"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-area-chart" />
<pre class="inline"><code><i class="<strong>icons8-area-chart</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-arrows-long-down" class="icons8-arrows-long-down"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-arrows-long-down" />
<pre class="inline"><code><i class="<strong>icons8-arrows-long-down</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-arrows-long-left" class="icons8-arrows-long-left"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-arrows-long-left" />
<pre class="inline"><code><i class="<strong>icons8-arrows-long-left</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-arrows-long-right" class="icons8-arrows-long-right"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-arrows-long-right" />
<pre class="inline"><code><i class="<strong>icons8-arrows-long-right</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-arrows-long-up" class="icons8-arrows-long-up"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-arrows-long-up" />
<pre class="inline"><code><i class="<strong>icons8-arrows-long-up</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-asterisk" class="icons8-asterisk"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-asterisk" />
<pre class="inline"><code><i class="<strong>icons8-asterisk</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-audio-file" class="icons8-audio-file"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-audio-file" />
<pre class="inline"><code><i class="<strong>icons8-audio-file</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-babys-room" class="icons8-babys-room"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-babys-room" />
<pre class="inline"><code><i class="<strong>icons8-babys-room</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bank-card" class="icons8-bank-card"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-bank-card" />
<pre class="inline"><code><i class="<strong>icons8-bank-card</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-banknotes" class="icons8-banknotes"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-banknotes" />
<pre class="inline"><code><i class="<strong>icons8-banknotes</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bar-chart" class="icons8-bar-chart"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-bar-chart" />
<pre class="inline"><code><i class="<strong>icons8-bar-chart</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-barcode" class="icons8-barcode"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-barcode" />
<pre class="inline"><code><i class="<strong>icons8-barcode</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bed" class="icons8-bed"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-bed" />
<pre class="inline"><code><i class="<strong>icons8-bed</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-binoculars" class="icons8-binoculars"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-binoculars" />
<pre class="inline"><code><i class="<strong>icons8-binoculars</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bitcoin" class="icons8-bitcoin"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-bitcoin" />
<pre class="inline"><code><i class="<strong>icons8-bitcoin</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bold" class="icons8-bold"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icons8-bold" />
<pre class="inline"><code><i class="<strong>icons8-bold</strong>"></i></code></pre>
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-21"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icons8-bookmark" class="icons8-bookmark"></i></span>
</div>
<div class="preview-scale">
<span class="step">21</span><span cla