<!DOCTYPE html>
<html>
<head>
  <title>Ionicons v1.5.2 Cheatsheet</title>
  <style>
    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    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 20px;
      width: 95%;
    }

    .icon-row {
      border-bottom: 1px dotted #ccc;
      padding: 10px 0 20px;
      margin-bottom: 20px;
    }
    .ion {
      -webkit-touch-callout: text;
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }

    .preview-icon { 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 i {
      -webkit-transition: opacity .3s;
      -moz-transition: opacity .3s;
      -ms-transition: opacity .3s;
      -o-transition: opacity .3s;
      transition: opacity .3s;
    }

    .step:hover i { opacity: .3; }
    
    .size-12 { font-size: 12px; }
    .size-14 { font-size: 14px; }
    .size-16 { font-size: 16px; }
    .size-18 { font-size: 18px; }
    .size-21 { font-size: 21px; }
    .size-24 { font-size: 24px; }
    .size-32 { font-size: 32px; }
    .size-48 { font-size: 48px; }
    .size-64 { font-size: 64px; }
    .size-96 { font-size: 96px; }
    
    .usage { margin-top: 10px; }
    .usage input {
      font-family: monospace;
      margin-right: 3px;
      padding: 2px 5px;
      text-align: center;
      -webkit-touch-callout: text;
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }

    .usage label { 
      font-size: 12px; 
      text-align: right; 
      padding: 0 3px 0 60px;
    }
    .usage label:first-child { padding-left: 0; }
    .usage .name { width: 180px; }
    .usage .html { width: 80px; }
    .usage .css { width: 80px; }

    footer {
      color: #888;
      font-size: 12px;
      padding: 20px 0;
    }
  </style>
  <link href="css/ionicons.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <header>
      <h1>Ionicons v1.5.2 Cheatsheet, 601 icons:</h1>
      <p><a href="http://ionicons.com/">Ionicons Homepage</a></p>
    </header>
    <div class="content">
      <div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-alert"></i>
    </span><span class="step size-14">
      <i class="icon ion-alert"></i>
    </span><span class="step size-16">
      <i class="icon ion-alert"></i>
    </span><span class="step size-18">
      <i class="icon ion-alert"></i>
    </span><span class="step size-21">
      <i class="icon ion-alert"></i>
    </span><span class="step size-24">
      <i class="icon ion-alert"></i>
    </span><span class="step size-32">
      <i class="icon ion-alert"></i>
    </span><span class="step size-48">
      <i class="icon ion-alert"></i>
    </span><span class="step size-64">
      <i class="icon ion-alert"></i>
    </span><span class="step size-96">
      <i class="icon ion-alert"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert" />

    <label>Selectable:</label>
    <span class="ion">&#xf101;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f101" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-alert-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-alert-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf100;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f100" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-add"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-add"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-add" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-add-contact"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-add-contact"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-add-contact" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-alarm"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-alarm"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-alarm" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-archive"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-archive"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-archive" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-back"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-back"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-back" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ca;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ca;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ca" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-down-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-down-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-down-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf2cb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2cb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2cb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-down-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-down-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-down-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf2cc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2cc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2cc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-forward"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-forward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-forward" />

    <label>Selectable:</label>
    <span class="ion">&#xf30f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-up-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-up-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-up-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf2cd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2cd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2cd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-arrow-up-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-arrow-up-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-arrow-up-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ce;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ce;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ce" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-battery"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-battery"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-battery" />

    <label>Selectable:</label>
    <span class="ion">&#xf2cf;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2cf;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2cf" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-book"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-book"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-book" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-calendar"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-calendar"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-calendar" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-call"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-call"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-call" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-camera"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-camera"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-camera" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-chat"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-chat"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-chat" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-checkmark"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-checkmark"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-checkmark" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-clock"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-clock"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-clock" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-close"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-close"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-close" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-contact"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-contact"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-contact" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-contacts"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-contacts"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-contacts" />

    <label>Selectable:</label>
    <span class="ion">&#xf2d9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2d9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2d9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-data"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-data"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-data" />

    <label>Selectable:</label>
    <span class="ion">&#xf2da;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2da;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2da" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-developer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-developer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-developer" />

    <label>Selectable:</label>
    <span class="ion">&#xf2db;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2db;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2db" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-display"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-display"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-display" />

    <label>Selectable:</label>
    <span class="ion">&#xf2dc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2dc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2dc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-download"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-download"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-download" />

    <label>Selectable:</label>
    <span class="ion">&#xf2dd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2dd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2dd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-drawer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-drawer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-drawer" />

    <label>Selectable:</label>
    <span class="ion">&#xf310;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf310;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f310" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-dropdown"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-dropdown"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-dropdown" />

    <label>Selectable:</label>
    <span class="ion">&#xf2de;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2de;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2de" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-earth"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-earth"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-earth" />

    <label>Selectable:</label>
    <span class="ion">&#xf2df;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2df;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2df" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-folder"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-folder"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-folder" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-forums"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-forums"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-forums" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-friends"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-friends"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-friends" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-hand"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-hand"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-hand" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-image"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-image"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-image" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-inbox"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-inbox"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-inbox" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-information"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-information"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-information" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-keypad"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-keypad"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-keypad" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-lightbulb"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-lightbulb"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-lightbulb" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-locate"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-locate"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-locate" />

    <label>Selectable:</label>
    <span class="ion">&#xf2e9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2e9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2e9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-location"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-location"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-location" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ea;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ea;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ea" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-mail"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-mail"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-mail" />

    <label>Selectable:</label>
    <span class="ion">&#xf2eb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2eb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2eb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-microphone"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-microphone"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-microphone" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ec;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ec;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ec" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-mixer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-mixer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-mixer" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ed;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ed;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ed" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-more"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-more"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-more" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ee;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ee;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ee" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-note"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-note"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-note" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ef;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ef;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ef" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-playstore"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-playstore"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-playstore" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-printer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-printer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-printer" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-promotion"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-promotion"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-promotion" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-reminder"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-reminder"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-reminder" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-remove"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-remove"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-remove" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-search"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-search"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-search" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-send"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-send"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-send" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-settings"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-settings"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-settings" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-share"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-share"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-share" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-social"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-social"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-social" />

    <label>Selectable:</label>
    <span class="ion">&#xf2fa;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2fa;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2fa" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-social-user"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-social-user"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-social-user" />

    <label>Selectable:</label>
    <span class="ion">&#xf2f9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2f9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2f9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-sort"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-sort"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-sort" />

    <label>Selectable:</label>
    <span class="ion">&#xf2fb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2fb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2fb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-stair-drawer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-stair-drawer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-stair-drawer" />

    <label>Selectable:</label>
    <span class="ion">&#xf311;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf311;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f311" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-star"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-star"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-star" />

    <label>Selectable:</label>
    <span class="ion">&#xf2fc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2fc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2fc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-stopwatch"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-stopwatch"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-stopwatch" />

    <label>Selectable:</label>
    <span class="ion">&#xf2fd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2fd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2fd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-storage"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-storage"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-storage" />

    <label>Selectable:</label>
    <span class="ion">&#xf2fe;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2fe;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2fe" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-system-back"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-system-back"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-system-back" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ff;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ff;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ff" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-system-home"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-system-home"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-system-home" />

    <label>Selectable:</label>
    <span class="ion">&#xf300;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf300;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f300" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-system-windows"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-system-windows"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-system-windows" />

    <label>Selectable:</label>
    <span class="ion">&#xf301;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf301;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f301" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-timer"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-timer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-timer" />

    <label>Selectable:</label>
    <span class="ion">&#xf302;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf302;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f302" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-trash"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-trash"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-trash" />

    <label>Selectable:</label>
    <span class="ion">&#xf303;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf303;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f303" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-user-menu"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-user-menu"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-user-menu" />

    <label>Selectable:</label>
    <span class="ion">&#xf312;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf312;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f312" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-volume"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-volume"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-volume" />

    <label>Selectable:</label>
    <span class="ion">&#xf304;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf304;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f304" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-14">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-16">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-18">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-21">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-24">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-32">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-48">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-64">
      <i class="icon ion-android-wifi"></i>
    </span><span class="step size-96">
      <i class="icon ion-android-wifi"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-wifi" />

    <label>Selectable:</label>
    <span class="ion">&#xf305;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf305;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f305" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-14">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-16">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-18">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-21">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-24">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-32">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-48">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-64">
      <i class="icon ion-aperture"></i>
    </span><span class="step size-96">
      <i class="icon ion-aperture"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-aperture" />

    <label>Selectable:</label>
    <span class="ion">&#xf313;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf313;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f313" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-archive"></i>
    </span><span class="step size-14">
      <i class="icon ion-archive"></i>
    </span><span class="step size-16">
      <i class="icon ion-archive"></i>
    </span><span class="step size-18">
      <i class="icon ion-archive"></i>
    </span><span class="step size-21">
      <i class="icon ion-archive"></i>
    </span><span class="step size-24">
      <i class="icon ion-archive"></i>
    </span><span class="step size-32">
      <i class="icon ion-archive"></i>
    </span><span class="step size-48">
      <i class="icon ion-archive"></i>
    </span><span class="step size-64">
      <i class="icon ion-archive"></i>
    </span><span class="step size-96">
      <i class="icon ion-archive"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-archive" />

    <label>Selectable:</label>
    <span class="ion">&#xf102;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f102" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-down-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-down-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-down-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf103;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f103" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-down-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-down-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-down-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf104;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f104" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-down-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-down-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-down-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf105;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f105" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-expand"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-expand"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-expand" />

    <label>Selectable:</label>
    <span class="ion">&#xf25e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-graph-down-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-graph-down-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf25f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-graph-down-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-graph-down-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf260;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf260;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f260" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-graph-up-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-graph-up-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf261;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf261;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f261" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-graph-up-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-graph-up-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf262;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf262;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f262" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-left-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-left-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-left-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf106;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f106" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-left-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-left-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-left-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf107;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f107" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-left-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-left-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-left-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf108;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f108" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-move"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-move"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-move" />

    <label>Selectable:</label>
    <span class="ion">&#xf263;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf263;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f263" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-resize"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-resize"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-resize" />

    <label>Selectable:</label>
    <span class="ion">&#xf264;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf264;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f264" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-return-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-return-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-return-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf265;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf265;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f265" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-return-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-return-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-return-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf266;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf266;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f266" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-right-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-right-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-right-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf109;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f109" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-right-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-right-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-right-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf10a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-right-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-right-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-right-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf10b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-shrink"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-shrink"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-shrink" />

    <label>Selectable:</label>
    <span class="ion">&#xf267;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf267;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f267" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-swap"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-swap"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-swap" />

    <label>Selectable:</label>
    <span class="ion">&#xf268;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf268;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f268" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-up-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-up-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-up-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf10c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-up-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-up-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-up-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf10d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-arrow-up-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-arrow-up-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-arrow-up-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf10e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-14">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-16">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-18">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-21">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-24">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-32">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-48">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-64">
      <i class="icon ion-asterisk"></i>
    </span><span class="step size-96">
      <i class="icon ion-asterisk"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-asterisk" />

    <label>Selectable:</label>
    <span class="ion">&#xf314;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf314;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f314" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-at"></i>
    </span><span class="step size-14">
      <i class="icon ion-at"></i>
    </span><span class="step size-16">
      <i class="icon ion-at"></i>
    </span><span class="step size-18">
      <i class="icon ion-at"></i>
    </span><span class="step size-21">
      <i class="icon ion-at"></i>
    </span><span class="step size-24">
      <i class="icon ion-at"></i>
    </span><span class="step size-32">
      <i class="icon ion-at"></i>
    </span><span class="step size-48">
      <i class="icon ion-at"></i>
    </span><span class="step size-64">
      <i class="icon ion-at"></i>
    </span><span class="step size-96">
      <i class="icon ion-at"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-at" />

    <label>Selectable:</label>
    <span class="ion">&#xf10f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f10f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-bag"></i>
    </span><span class="step size-14">
      <i class="icon ion-bag"></i>
    </span><span class="step size-16">
      <i class="icon ion-bag"></i>
    </span><span class="step size-18">
      <i class="icon ion-bag"></i>
    </span><span class="step size-21">
      <i class="icon ion-bag"></i>
    </span><span class="step size-24">
      <i class="icon ion-bag"></i>
    </span><span class="step size-32">
      <i class="icon ion-bag"></i>
    </span><span class="step size-48">
      <i class="icon ion-bag"></i>
    </span><span class="step size-64">
      <i class="icon ion-bag"></i>
    </span><span class="step size-96">
      <i class="icon ion-bag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bag" />

    <label>Selectable:</label>
    <span class="ion">&#xf110;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f110" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-14">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-16">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-18">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-21">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-24">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-32">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-48">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-64">
      <i class="icon ion-battery-charging"></i>
    </span><span class="step size-96">
      <i class="icon ion-battery-charging"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-battery-charging" />

    <label>Selectable:</label>
    <span class="ion">&#xf111;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f111" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-battery-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-battery-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-battery-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf112;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f112" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-14">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-16">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-18">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-21">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-24">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-32">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-48">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-64">
      <i class="icon ion-battery-full"></i>
    </span><span class="step size-96">
      <i class="icon ion-battery-full"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-battery-full" />

    <label>Selectable:</label>
    <span class="ion">&#xf113;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f113" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-14">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-16">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-18">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-21">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-24">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-32">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-48">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-64">
      <i class="icon ion-battery-half"></i>
    </span><span class="step size-96">
      <i class="icon ion-battery-half"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-battery-half" />

    <label>Selectable:</label>
    <span class="ion">&#xf114;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f114" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-14">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-16">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-18">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-21">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-24">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-32">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-48">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-64">
      <i class="icon ion-battery-low"></i>
    </span><span class="step size-96">
      <i class="icon ion-battery-low"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-battery-low" />

    <label>Selectable:</label>
    <span class="ion">&#xf115;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f115" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-14">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-16">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-18">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-21">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-24">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-32">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-48">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-64">
      <i class="icon ion-beaker"></i>
    </span><span class="step size-96">
      <i class="icon ion-beaker"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-beaker" />

    <label>Selectable:</label>
    <span class="ion">&#xf269;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf269;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f269" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-beer"></i>
    </span><span class="step size-14">
      <i class="icon ion-beer"></i>
    </span><span class="step size-16">
      <i class="icon ion-beer"></i>
    </span><span class="step size-18">
      <i class="icon ion-beer"></i>
    </span><span class="step size-21">
      <i class="icon ion-beer"></i>
    </span><span class="step size-24">
      <i class="icon ion-beer"></i>
    </span><span class="step size-32">
      <i class="icon ion-beer"></i>
    </span><span class="step size-48">
      <i class="icon ion-beer"></i>
    </span><span class="step size-64">
      <i class="icon ion-beer"></i>
    </span><span class="step size-96">
      <i class="icon ion-beer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-beer" />

    <label>Selectable:</label>
    <span class="ion">&#xf26a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-14">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-16">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-18">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-21">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-24">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-32">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-48">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-64">
      <i class="icon ion-bluetooth"></i>
    </span><span class="step size-96">
      <i class="icon ion-bluetooth"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bluetooth" />

    <label>Selectable:</label>
    <span class="ion">&#xf116;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f116" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-14">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-16">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-18">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-21">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-24">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-32">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-48">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-64">
      <i class="icon ion-bonfire"></i>
    </span><span class="step size-96">
      <i class="icon ion-bonfire"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bonfire" />

    <label>Selectable:</label>
    <span class="ion">&#xf315;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf315;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f315" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-14">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-16">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-18">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-21">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-24">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-32">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-48">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-64">
      <i class="icon ion-bookmark"></i>
    </span><span class="step size-96">
      <i class="icon ion-bookmark"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bookmark" />

    <label>Selectable:</label>
    <span class="ion">&#xf26b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-14">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-16">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-18">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-21">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-24">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-32">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-48">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-64">
      <i class="icon ion-briefcase"></i>
    </span><span class="step size-96">
      <i class="icon ion-briefcase"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-briefcase" />

    <label>Selectable:</label>
    <span class="ion">&#xf26c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-bug"></i>
    </span><span class="step size-14">
      <i class="icon ion-bug"></i>
    </span><span class="step size-16">
      <i class="icon ion-bug"></i>
    </span><span class="step size-18">
      <i class="icon ion-bug"></i>
    </span><span class="step size-21">
      <i class="icon ion-bug"></i>
    </span><span class="step size-24">
      <i class="icon ion-bug"></i>
    </span><span class="step size-32">
      <i class="icon ion-bug"></i>
    </span><span class="step size-48">
      <i class="icon ion-bug"></i>
    </span><span class="step size-64">
      <i class="icon ion-bug"></i>
    </span><span class="step size-96">
      <i class="icon ion-bug"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bug" />

    <label>Selectable:</label>
    <span class="ion">&#xf2be;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2be;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2be" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-14">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-16">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-18">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-21">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-24">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-32">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-48">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-64">
      <i class="icon ion-calculator"></i>
    </span><span class="step size-96">
      <i class="icon ion-calculator"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-calculator" />

    <label>Selectable:</label>
    <span class="ion">&#xf26d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-14">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-16">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-18">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-21">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-24">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-32">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-48">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-64">
      <i class="icon ion-calendar"></i>
    </span><span class="step size-96">
      <i class="icon ion-calendar"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-calendar" />

    <label>Selectable:</label>
    <span class="ion">&#xf117;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f117" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-camera"></i>
    </span><span class="step size-14">
      <i class="icon ion-camera"></i>
    </span><span class="step size-16">
      <i class="icon ion-camera"></i>
    </span><span class="step size-18">
      <i class="icon ion-camera"></i>
    </span><span class="step size-21">
      <i class="icon ion-camera"></i>
    </span><span class="step size-24">
      <i class="icon ion-camera"></i>
    </span><span class="step size-32">
      <i class="icon ion-camera"></i>
    </span><span class="step size-48">
      <i class="icon ion-camera"></i>
    </span><span class="step size-64">
      <i class="icon ion-camera"></i>
    </span><span class="step size-96">
      <i class="icon ion-camera"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-camera" />

    <label>Selectable:</label>
    <span class="ion">&#xf118;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f118" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-card"></i>
    </span><span class="step size-14">
      <i class="icon ion-card"></i>
    </span><span class="step size-16">
      <i class="icon ion-card"></i>
    </span><span class="step size-18">
      <i class="icon ion-card"></i>
    </span><span class="step size-21">
      <i class="icon ion-card"></i>
    </span><span class="step size-24">
      <i class="icon ion-card"></i>
    </span><span class="step size-32">
      <i class="icon ion-card"></i>
    </span><span class="step size-48">
      <i class="icon ion-card"></i>
    </span><span class="step size-64">
      <i class="icon ion-card"></i>
    </span><span class="step size-96">
      <i class="icon ion-card"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-card" />

    <label>Selectable:</label>
    <span class="ion">&#xf119;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f119" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-cash"></i>
    </span><span class="step size-14">
      <i class="icon ion-cash"></i>
    </span><span class="step size-16">
      <i class="icon ion-cash"></i>
    </span><span class="step size-18">
      <i class="icon ion-cash"></i>
    </span><span class="step size-21">
      <i class="icon ion-cash"></i>
    </span><span class="step size-24">
      <i class="icon ion-cash"></i>
    </span><span class="step size-32">
      <i class="icon ion-cash"></i>
    </span><span class="step size-48">
      <i class="icon ion-cash"></i>
    </span><span class="step size-64">
      <i class="icon ion-cash"></i>
    </span><span class="step size-96">
      <i class="icon ion-cash"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-cash" />

    <label>Selectable:</label>
    <span class="ion">&#xf316;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf316;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f316" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatbox"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatbox"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatbox" />

    <label>Selectable:</label>
    <span class="ion">&#xf11b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatbox-working"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatbox-working"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatbox-working" />

    <label>Selectable:</label>
    <span class="ion">&#xf11a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatboxes"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatboxes"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatboxes" />

    <label>Selectable:</label>
    <span class="ion">&#xf11c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatbubble"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatbubble"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatbubble" />

    <label>Selectable:</label>
    <span class="ion">&#xf11e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatbubble-working"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatbubble-working"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatbubble-working" />

    <label>Selectable:</label>
    <span class="ion">&#xf11d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-14">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-16">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-18">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-21">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-24">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-32">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-48">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-64">
      <i class="icon ion-chatbubbles"></i>
    </span><span class="step size-96">
      <i class="icon ion-chatbubbles"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chatbubbles" />

    <label>Selectable:</label>
    <span class="ion">&#xf11f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f11f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-14">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-16">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-18">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-21">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-24">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-32">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-48">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-64">
      <i class="icon ion-checkmark"></i>
    </span><span class="step size-96">
      <i class="icon ion-checkmark"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-checkmark" />

    <label>Selectable:</label>
    <span class="ion">&#xf122;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f122" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-checkmark-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-checkmark-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-checkmark-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf120;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f120" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-14">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-16">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-18">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-21">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-24">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-32">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-48">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-64">
      <i class="icon ion-checkmark-round"></i>
    </span><span class="step size-96">
      <i class="icon ion-checkmark-round"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-checkmark-round" />

    <label>Selectable:</label>
    <span class="ion">&#xf121;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f121" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-14">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-16">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-18">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-21">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-24">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-32">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-48">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-64">
      <i class="icon ion-chevron-down"></i>
    </span><span class="step size-96">
      <i class="icon ion-chevron-down"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chevron-down" />

    <label>Selectable:</label>
    <span class="ion">&#xf123;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f123" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-chevron-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-chevron-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chevron-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf124;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f124" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-chevron-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-chevron-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chevron-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf125;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f125" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-14">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-16">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-18">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-21">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-24">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-32">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-48">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-64">
      <i class="icon ion-chevron-up"></i>
    </span><span class="step size-96">
      <i class="icon ion-chevron-up"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-chevron-up" />

    <label>Selectable:</label>
    <span class="ion">&#xf126;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f126" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-14">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-16">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-18">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-21">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-24">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-32">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-48">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-64">
      <i class="icon ion-clipboard"></i>
    </span><span class="step size-96">
      <i class="icon ion-clipboard"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-clipboard" />

    <label>Selectable:</label>
    <span class="ion">&#xf127;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f127" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-clock"></i>
    </span><span class="step size-14">
      <i class="icon ion-clock"></i>
    </span><span class="step size-16">
      <i class="icon ion-clock"></i>
    </span><span class="step size-18">
      <i class="icon ion-clock"></i>
    </span><span class="step size-21">
      <i class="icon ion-clock"></i>
    </span><span class="step size-24">
      <i class="icon ion-clock"></i>
    </span><span class="step size-32">
      <i class="icon ion-clock"></i>
    </span><span class="step size-48">
      <i class="icon ion-clock"></i>
    </span><span class="step size-64">
      <i class="icon ion-clock"></i>
    </span><span class="step size-96">
      <i class="icon ion-clock"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-clock" />

    <label>Selectable:</label>
    <span class="ion">&#xf26e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-close"></i>
    </span><span class="step size-14">
      <i class="icon ion-close"></i>
    </span><span class="step size-16">
      <i class="icon ion-close"></i>
    </span><span class="step size-18">
      <i class="icon ion-close"></i>
    </span><span class="step size-21">
      <i class="icon ion-close"></i>
    </span><span class="step size-24">
      <i class="icon ion-close"></i>
    </span><span class="step size-32">
      <i class="icon ion-close"></i>
    </span><span class="step size-48">
      <i class="icon ion-close"></i>
    </span><span class="step size-64">
      <i class="icon ion-close"></i>
    </span><span class="step size-96">
      <i class="icon ion-close"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-close" />

    <label>Selectable:</label>
    <span class="ion">&#xf12a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-close-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-close-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-close-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf128;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f128" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-14">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-16">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-18">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-21">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-24">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-32">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-48">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-64">
      <i class="icon ion-close-round"></i>
    </span><span class="step size-96">
      <i class="icon ion-close-round"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-close-round" />

    <label>Selectable:</label>
    <span class="ion">&#xf129;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f129" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-14">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-16">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-18">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-21">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-24">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-32">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-48">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-64">
      <i class="icon ion-closed-captioning"></i>
    </span><span class="step size-96">
      <i class="icon ion-closed-captioning"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-closed-captioning" />

    <label>Selectable:</label>
    <span class="ion">&#xf317;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf317;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f317" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-14">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-16">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-18">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-21">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-24">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-32">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-48">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-64">
      <i class="icon ion-cloud"></i>
    </span><span class="step size-96">
      <i class="icon ion-cloud"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-cloud" />

    <label>Selectable:</label>
    <span class="ion">&#xf12b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-code"></i>
    </span><span class="step size-14">
      <i class="icon ion-code"></i>
    </span><span class="step size-16">
      <i class="icon ion-code"></i>
    </span><span class="step size-18">
      <i class="icon ion-code"></i>
    </span><span class="step size-21">
      <i class="icon ion-code"></i>
    </span><span class="step size-24">
      <i class="icon ion-code"></i>
    </span><span class="step size-32">
      <i class="icon ion-code"></i>
    </span><span class="step size-48">
      <i class="icon ion-code"></i>
    </span><span class="step size-64">
      <i class="icon ion-code"></i>
    </span><span class="step size-96">
      <i class="icon ion-code"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-code" />

    <label>Selectable:</label>
    <span class="ion">&#xf271;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf271;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f271" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-14">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-16">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-18">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-21">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-24">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-32">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-48">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-64">
      <i class="icon ion-code-download"></i>
    </span><span class="step size-96">
      <i class="icon ion-code-download"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-code-download" />

    <label>Selectable:</label>
    <span class="ion">&#xf26f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf26f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f26f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-14">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-16">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-18">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-21">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-24">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-32">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-48">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-64">
      <i class="icon ion-code-working"></i>
    </span><span class="step size-96">
      <i class="icon ion-code-working"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-code-working" />

    <label>Selectable:</label>
    <span class="ion">&#xf270;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf270;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f270" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-14">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-16">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-18">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-21">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-24">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-32">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-48">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-64">
      <i class="icon ion-coffee"></i>
    </span><span class="step size-96">
      <i class="icon ion-coffee"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-coffee" />

    <label>Selectable:</label>
    <span class="ion">&#xf272;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf272;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f272" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-compass"></i>
    </span><span class="step size-14">
      <i class="icon ion-compass"></i>
    </span><span class="step size-16">
      <i class="icon ion-compass"></i>
    </span><span class="step size-18">
      <i class="icon ion-compass"></i>
    </span><span class="step size-21">
      <i class="icon ion-compass"></i>
    </span><span class="step size-24">
      <i class="icon ion-compass"></i>
    </span><span class="step size-32">
      <i class="icon ion-compass"></i>
    </span><span class="step size-48">
      <i class="icon ion-compass"></i>
    </span><span class="step size-64">
      <i class="icon ion-compass"></i>
    </span><span class="step size-96">
      <i class="icon ion-compass"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-compass" />

    <label>Selectable:</label>
    <span class="ion">&#xf273;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf273;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f273" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-compose"></i>
    </span><span class="step size-14">
      <i class="icon ion-compose"></i>
    </span><span class="step size-16">
      <i class="icon ion-compose"></i>
    </span><span class="step size-18">
      <i class="icon ion-compose"></i>
    </span><span class="step size-21">
      <i class="icon ion-compose"></i>
    </span><span class="step size-24">
      <i class="icon ion-compose"></i>
    </span><span class="step size-32">
      <i class="icon ion-compose"></i>
    </span><span class="step size-48">
      <i class="icon ion-compose"></i>
    </span><span class="step size-64">
      <i class="icon ion-compose"></i>
    </span><span class="step size-96">
      <i class="icon ion-compose"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-compose" />

    <label>Selectable:</label>
    <span class="ion">&#xf12c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-14">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-16">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-18">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-21">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-24">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-32">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-48">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-64">
      <i class="icon ion-connection-bars"></i>
    </span><span class="step size-96">
      <i class="icon ion-connection-bars"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-connection-bars" />

    <label>Selectable:</label>
    <span class="ion">&#xf274;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf274;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f274" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-14">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-16">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-18">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-21">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-24">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-32">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-48">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-64">
      <i class="icon ion-contrast"></i>
    </span><span class="step size-96">
      <i class="icon ion-contrast"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-contrast" />

    <label>Selectable:</label>
    <span class="ion">&#xf275;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf275;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f275" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-cube"></i>
    </span><span class="step size-14">
      <i class="icon ion-cube"></i>
    </span><span class="step size-16">
      <i class="icon ion-cube"></i>
    </span><span class="step size-18">
      <i class="icon ion-cube"></i>
    </span><span class="step size-21">
      <i class="icon ion-cube"></i>
    </span><span class="step size-24">
      <i class="icon ion-cube"></i>
    </span><span class="step size-32">
      <i class="icon ion-cube"></i>
    </span><span class="step size-48">
      <i class="icon ion-cube"></i>
    </span><span class="step size-64">
      <i class="icon ion-cube"></i>
    </span><span class="step size-96">
      <i class="icon ion-cube"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-cube" />

    <label>Selectable:</label>
    <span class="ion">&#xf318;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf318;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f318" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-disc"></i>
    </span><span class="step size-14">
      <i class="icon ion-disc"></i>
    </span><span class="step size-16">
      <i class="icon ion-disc"></i>
    </span><span class="step size-18">
      <i class="icon ion-disc"></i>
    </span><span class="step size-21">
      <i class="icon ion-disc"></i>
    </span><span class="step size-24">
      <i class="icon ion-disc"></i>
    </span><span class="step size-32">
      <i class="icon ion-disc"></i>
    </span><span class="step size-48">
      <i class="icon ion-disc"></i>
    </span><span class="step size-64">
      <i class="icon ion-disc"></i>
    </span><span class="step size-96">
      <i class="icon ion-disc"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-disc" />

    <label>Selectable:</label>
    <span class="ion">&#xf12d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-document"></i>
    </span><span class="step size-14">
      <i class="icon ion-document"></i>
    </span><span class="step size-16">
      <i class="icon ion-document"></i>
    </span><span class="step size-18">
      <i class="icon ion-document"></i>
    </span><span class="step size-21">
      <i class="icon ion-document"></i>
    </span><span class="step size-24">
      <i class="icon ion-document"></i>
    </span><span class="step size-32">
      <i class="icon ion-document"></i>
    </span><span class="step size-48">
      <i class="icon ion-document"></i>
    </span><span class="step size-64">
      <i class="icon ion-document"></i>
    </span><span class="step size-96">
      <i class="icon ion-document"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-document" />

    <label>Selectable:</label>
    <span class="ion">&#xf12f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-14">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-16">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-18">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-21">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-24">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-32">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-48">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-64">
      <i class="icon ion-document-text"></i>
    </span><span class="step size-96">
      <i class="icon ion-document-text"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-document-text" />

    <label>Selectable:</label>
    <span class="ion">&#xf12e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f12e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-drag"></i>
    </span><span class="step size-14">
      <i class="icon ion-drag"></i>
    </span><span class="step size-16">
      <i class="icon ion-drag"></i>
    </span><span class="step size-18">
      <i class="icon ion-drag"></i>
    </span><span class="step size-21">
      <i class="icon ion-drag"></i>
    </span><span class="step size-24">
      <i class="icon ion-drag"></i>
    </span><span class="step size-32">
      <i class="icon ion-drag"></i>
    </span><span class="step size-48">
      <i class="icon ion-drag"></i>
    </span><span class="step size-64">
      <i class="icon ion-drag"></i>
    </span><span class="step size-96">
      <i class="icon ion-drag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-drag" />

    <label>Selectable:</label>
    <span class="ion">&#xf130;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f130" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-earth"></i>
    </span><span class="step size-14">
      <i class="icon ion-earth"></i>
    </span><span class="step size-16">
      <i class="icon ion-earth"></i>
    </span><span class="step size-18">
      <i class="icon ion-earth"></i>
    </span><span class="step size-21">
      <i class="icon ion-earth"></i>
    </span><span class="step size-24">
      <i class="icon ion-earth"></i>
    </span><span class="step size-32">
      <i class="icon ion-earth"></i>
    </span><span class="step size-48">
      <i class="icon ion-earth"></i>
    </span><span class="step size-64">
      <i class="icon ion-earth"></i>
    </span><span class="step size-96">
      <i class="icon ion-earth"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-earth" />

    <label>Selectable:</label>
    <span class="ion">&#xf276;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf276;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f276" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-edit"></i>
    </span><span class="step size-14">
      <i class="icon ion-edit"></i>
    </span><span class="step size-16">
      <i class="icon ion-edit"></i>
    </span><span class="step size-18">
      <i class="icon ion-edit"></i>
    </span><span class="step size-21">
      <i class="icon ion-edit"></i>
    </span><span class="step size-24">
      <i class="icon ion-edit"></i>
    </span><span class="step size-32">
      <i class="icon ion-edit"></i>
    </span><span class="step size-48">
      <i class="icon ion-edit"></i>
    </span><span class="step size-64">
      <i class="icon ion-edit"></i>
    </span><span class="step size-96">
      <i class="icon ion-edit"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-edit" />

    <label>Selectable:</label>
    <span class="ion">&#xf2bf;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2bf;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2bf" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-egg"></i>
    </span><span class="step size-14">
      <i class="icon ion-egg"></i>
    </span><span class="step size-16">
      <i class="icon ion-egg"></i>
    </span><span class="step size-18">
      <i class="icon ion-egg"></i>
    </span><span class="step size-21">
      <i class="icon ion-egg"></i>
    </span><span class="step size-24">
      <i class="icon ion-egg"></i>
    </span><span class="step size-32">
      <i class="icon ion-egg"></i>
    </span><span class="step size-48">
      <i class="icon ion-egg"></i>
    </span><span class="step size-64">
      <i class="icon ion-egg"></i>
    </span><span class="step size-96">
      <i class="icon ion-egg"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-egg" />

    <label>Selectable:</label>
    <span class="ion">&#xf277;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf277;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f277" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-eject"></i>
    </span><span class="step size-14">
      <i class="icon ion-eject"></i>
    </span><span class="step size-16">
      <i class="icon ion-eject"></i>
    </span><span class="step size-18">
      <i class="icon ion-eject"></i>
    </span><span class="step size-21">
      <i class="icon ion-eject"></i>
    </span><span class="step size-24">
      <i class="icon ion-eject"></i>
    </span><span class="step size-32">
      <i class="icon ion-eject"></i>
    </span><span class="step size-48">
      <i class="icon ion-eject"></i>
    </span><span class="step size-64">
      <i class="icon ion-eject"></i>
    </span><span class="step size-96">
      <i class="icon ion-eject"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-eject" />

    <label>Selectable:</label>
    <span class="ion">&#xf131;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f131" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-email"></i>
    </span><span class="step size-14">
      <i class="icon ion-email"></i>
    </span><span class="step size-16">
      <i class="icon ion-email"></i>
    </span><span class="step size-18">
      <i class="icon ion-email"></i>
    </span><span class="step size-21">
      <i class="icon ion-email"></i>
    </span><span class="step size-24">
      <i class="icon ion-email"></i>
    </span><span class="step size-32">
      <i class="icon ion-email"></i>
    </span><span class="step size-48">
      <i class="icon ion-email"></i>
    </span><span class="step size-64">
      <i class="icon ion-email"></i>
    </span><span class="step size-96">
      <i class="icon ion-email"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-email" />

    <label>Selectable:</label>
    <span class="ion">&#xf132;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f132" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-eye"></i>
    </span><span class="step size-14">
      <i class="icon ion-eye"></i>
    </span><span class="step size-16">
      <i class="icon ion-eye"></i>
    </span><span class="step size-18">
      <i class="icon ion-eye"></i>
    </span><span class="step size-21">
      <i class="icon ion-eye"></i>
    </span><span class="step size-24">
      <i class="icon ion-eye"></i>
    </span><span class="step size-32">
      <i class="icon ion-eye"></i>
    </span><span class="step size-48">
      <i class="icon ion-eye"></i>
    </span><span class="step size-64">
      <i class="icon ion-eye"></i>
    </span><span class="step size-96">
      <i class="icon ion-eye"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-eye" />

    <label>Selectable:</label>
    <span class="ion">&#xf133;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f133" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-14">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-16">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-18">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-21">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-24">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-32">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-48">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-64">
      <i class="icon ion-eye-disabled"></i>
    </span><span class="step size-96">
      <i class="icon ion-eye-disabled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-eye-disabled" />

    <label>Selectable:</label>
    <span class="ion">&#xf306;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf306;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f306" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-female"></i>
    </span><span class="step size-14">
      <i class="icon ion-female"></i>
    </span><span class="step size-16">
      <i class="icon ion-female"></i>
    </span><span class="step size-18">
      <i class="icon ion-female"></i>
    </span><span class="step size-21">
      <i class="icon ion-female"></i>
    </span><span class="step size-24">
      <i class="icon ion-female"></i>
    </span><span class="step size-32">
      <i class="icon ion-female"></i>
    </span><span class="step size-48">
      <i class="icon ion-female"></i>
    </span><span class="step size-64">
      <i class="icon ion-female"></i>
    </span><span class="step size-96">
      <i class="icon ion-female"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-female" />

    <label>Selectable:</label>
    <span class="ion">&#xf278;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf278;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f278" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-filing"></i>
    </span><span class="step size-14">
      <i class="icon ion-filing"></i>
    </span><span class="step size-16">
      <i class="icon ion-filing"></i>
    </span><span class="step size-18">
      <i class="icon ion-filing"></i>
    </span><span class="step size-21">
      <i class="icon ion-filing"></i>
    </span><span class="step size-24">
      <i class="icon ion-filing"></i>
    </span><span class="step size-32">
      <i class="icon ion-filing"></i>
    </span><span class="step size-48">
      <i class="icon ion-filing"></i>
    </span><span class="step size-64">
      <i class="icon ion-filing"></i>
    </span><span class="step size-96">
      <i class="icon ion-filing"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-filing" />

    <label>Selectable:</label>
    <span class="ion">&#xf134;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f134" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-14">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-16">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-18">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-21">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-24">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-32">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-48">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-64">
      <i class="icon ion-film-marker"></i>
    </span><span class="step size-96">
      <i class="icon ion-film-marker"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-film-marker" />

    <label>Selectable:</label>
    <span class="ion">&#xf135;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f135" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-14">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-16">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-18">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-21">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-24">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-32">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-48">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-64">
      <i class="icon ion-fireball"></i>
    </span><span class="step size-96">
      <i class="icon ion-fireball"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-fireball" />

    <label>Selectable:</label>
    <span class="ion">&#xf319;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf319;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f319" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-flag"></i>
    </span><span class="step size-14">
      <i class="icon ion-flag"></i>
    </span><span class="step size-16">
      <i class="icon ion-flag"></i>
    </span><span class="step size-18">
      <i class="icon ion-flag"></i>
    </span><span class="step size-21">
      <i class="icon ion-flag"></i>
    </span><span class="step size-24">
      <i class="icon ion-flag"></i>
    </span><span class="step size-32">
      <i class="icon ion-flag"></i>
    </span><span class="step size-48">
      <i class="icon ion-flag"></i>
    </span><span class="step size-64">
      <i class="icon ion-flag"></i>
    </span><span class="step size-96">
      <i class="icon ion-flag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-flag" />

    <label>Selectable:</label>
    <span class="ion">&#xf279;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf279;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f279" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-flame"></i>
    </span><span class="step size-14">
      <i class="icon ion-flame"></i>
    </span><span class="step size-16">
      <i class="icon ion-flame"></i>
    </span><span class="step size-18">
      <i class="icon ion-flame"></i>
    </span><span class="step size-21">
      <i class="icon ion-flame"></i>
    </span><span class="step size-24">
      <i class="icon ion-flame"></i>
    </span><span class="step size-32">
      <i class="icon ion-flame"></i>
    </span><span class="step size-48">
      <i class="icon ion-flame"></i>
    </span><span class="step size-64">
      <i class="icon ion-flame"></i>
    </span><span class="step size-96">
      <i class="icon ion-flame"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-flame" />

    <label>Selectable:</label>
    <span class="ion">&#xf31a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-flash"></i>
    </span><span class="step size-14">
      <i class="icon ion-flash"></i>
    </span><span class="step size-16">
      <i class="icon ion-flash"></i>
    </span><span class="step size-18">
      <i class="icon ion-flash"></i>
    </span><span class="step size-21">
      <i class="icon ion-flash"></i>
    </span><span class="step size-24">
      <i class="icon ion-flash"></i>
    </span><span class="step size-32">
      <i class="icon ion-flash"></i>
    </span><span class="step size-48">
      <i class="icon ion-flash"></i>
    </span><span class="step size-64">
      <i class="icon ion-flash"></i>
    </span><span class="step size-96">
      <i class="icon ion-flash"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-flash" />

    <label>Selectable:</label>
    <span class="ion">&#xf137;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f137" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-14">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-16">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-18">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-21">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-24">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-32">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-48">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-64">
      <i class="icon ion-flash-off"></i>
    </span><span class="step size-96">
      <i class="icon ion-flash-off"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-flash-off" />

    <label>Selectable:</label>
    <span class="ion">&#xf136;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f136" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-flask"></i>
    </span><span class="step size-14">
      <i class="icon ion-flask"></i>
    </span><span class="step size-16">
      <i class="icon ion-flask"></i>
    </span><span class="step size-18">
      <i class="icon ion-flask"></i>
    </span><span class="step size-21">
      <i class="icon ion-flask"></i>
    </span><span class="step size-24">
      <i class="icon ion-flask"></i>
    </span><span class="step size-32">
      <i class="icon ion-flask"></i>
    </span><span class="step size-48">
      <i class="icon ion-flask"></i>
    </span><span class="step size-64">
      <i class="icon ion-flask"></i>
    </span><span class="step size-96">
      <i class="icon ion-flask"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-flask" />

    <label>Selectable:</label>
    <span class="ion">&#xf138;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf138;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f138" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-folder"></i>
    </span><span class="step size-14">
      <i class="icon ion-folder"></i>
    </span><span class="step size-16">
      <i class="icon ion-folder"></i>
    </span><span class="step size-18">
      <i class="icon ion-folder"></i>
    </span><span class="step size-21">
      <i class="icon ion-folder"></i>
    </span><span class="step size-24">
      <i class="icon ion-folder"></i>
    </span><span class="step size-32">
      <i class="icon ion-folder"></i>
    </span><span class="step size-48">
      <i class="icon ion-folder"></i>
    </span><span class="step size-64">
      <i class="icon ion-folder"></i>
    </span><span class="step size-96">
      <i class="icon ion-folder"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-folder" />

    <label>Selectable:</label>
    <span class="ion">&#xf139;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf139;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f139" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-fork"></i>
    </span><span class="step size-14">
      <i class="icon ion-fork"></i>
    </span><span class="step size-16">
      <i class="icon ion-fork"></i>
    </span><span class="step size-18">
      <i class="icon ion-fork"></i>
    </span><span class="step size-21">
      <i class="icon ion-fork"></i>
    </span><span class="step size-24">
      <i class="icon ion-fork"></i>
    </span><span class="step size-32">
      <i class="icon ion-fork"></i>
    </span><span class="step size-48">
      <i class="icon ion-fork"></i>
    </span><span class="step size-64">
      <i class="icon ion-fork"></i>
    </span><span class="step size-96">
      <i class="icon ion-fork"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-fork" />

    <label>Selectable:</label>
    <span class="ion">&#xf27a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-14">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-16">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-18">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-21">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-24">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-32">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-48">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-64">
      <i class="icon ion-fork-repo"></i>
    </span><span class="step size-96">
      <i class="icon ion-fork-repo"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-fork-repo" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-forward"></i>
    </span><span class="step size-14">
      <i class="icon ion-forward"></i>
    </span><span class="step size-16">
      <i class="icon ion-forward"></i>
    </span><span class="step size-18">
      <i class="icon ion-forward"></i>
    </span><span class="step size-21">
      <i class="icon ion-forward"></i>
    </span><span class="step size-24">
      <i class="icon ion-forward"></i>
    </span><span class="step size-32">
      <i class="icon ion-forward"></i>
    </span><span class="step size-48">
      <i class="icon ion-forward"></i>
    </span><span class="step size-64">
      <i class="icon ion-forward"></i>
    </span><span class="step size-96">
      <i class="icon ion-forward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-forward" />

    <label>Selectable:</label>
    <span class="ion">&#xf13a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-14">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-16">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-18">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-21">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-24">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-32">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-48">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-64">
      <i class="icon ion-funnel"></i>
    </span><span class="step size-96">
      <i class="icon ion-funnel"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-funnel" />

    <label>Selectable:</label>
    <span class="ion">&#xf31b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-game-controller-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-game-controller-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-game-controller-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf13b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-game-controller-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-game-controller-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-game-controller-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf13c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-gear-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-gear-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-gear-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf13d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-gear-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-gear-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-gear-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf13e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-grid"></i>
    </span><span class="step size-14">
      <i class="icon ion-grid"></i>
    </span><span class="step size-16">
      <i class="icon ion-grid"></i>
    </span><span class="step size-18">
      <i class="icon ion-grid"></i>
    </span><span class="step size-21">
      <i class="icon ion-grid"></i>
    </span><span class="step size-24">
      <i class="icon ion-grid"></i>
    </span><span class="step size-32">
      <i class="icon ion-grid"></i>
    </span><span class="step size-48">
      <i class="icon ion-grid"></i>
    </span><span class="step size-64">
      <i class="icon ion-grid"></i>
    </span><span class="step size-96">
      <i class="icon ion-grid"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-grid" />

    <label>Selectable:</label>
    <span class="ion">&#xf13f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f13f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-14">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-16">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-18">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-21">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-24">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-32">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-48">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-64">
      <i class="icon ion-hammer"></i>
    </span><span class="step size-96">
      <i class="icon ion-hammer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-hammer" />

    <label>Selectable:</label>
    <span class="ion">&#xf27b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-happy"></i>
    </span><span class="step size-14">
      <i class="icon ion-happy"></i>
    </span><span class="step size-16">
      <i class="icon ion-happy"></i>
    </span><span class="step size-18">
      <i class="icon ion-happy"></i>
    </span><span class="step size-21">
      <i class="icon ion-happy"></i>
    </span><span class="step size-24">
      <i class="icon ion-happy"></i>
    </span><span class="step size-32">
      <i class="icon ion-happy"></i>
    </span><span class="step size-48">
      <i class="icon ion-happy"></i>
    </span><span class="step size-64">
      <i class="icon ion-happy"></i>
    </span><span class="step size-96">
      <i class="icon ion-happy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-happy" />

    <label>Selectable:</label>
    <span class="ion">&#xf31c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-14">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-16">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-18">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-21">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-24">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-32">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-48">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-64">
      <i class="icon ion-headphone"></i>
    </span><span class="step size-96">
      <i class="icon ion-headphone"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-headphone" />

    <label>Selectable:</label>
    <span class="ion">&#xf140;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf140;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f140" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-heart"></i>
    </span><span class="step size-14">
      <i class="icon ion-heart"></i>
    </span><span class="step size-16">
      <i class="icon ion-heart"></i>
    </span><span class="step size-18">
      <i class="icon ion-heart"></i>
    </span><span class="step size-21">
      <i class="icon ion-heart"></i>
    </span><span class="step size-24">
      <i class="icon ion-heart"></i>
    </span><span class="step size-32">
      <i class="icon ion-heart"></i>
    </span><span class="step size-48">
      <i class="icon ion-heart"></i>
    </span><span class="step size-64">
      <i class="icon ion-heart"></i>
    </span><span class="step size-96">
      <i class="icon ion-heart"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-heart" />

    <label>Selectable:</label>
    <span class="ion">&#xf141;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf141;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f141" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-14">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-16">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-18">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-21">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-24">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-32">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-48">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-64">
      <i class="icon ion-heart-broken"></i>
    </span><span class="step size-96">
      <i class="icon ion-heart-broken"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-heart-broken" />

    <label>Selectable:</label>
    <span class="ion">&#xf31d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-help"></i>
    </span><span class="step size-14">
      <i class="icon ion-help"></i>
    </span><span class="step size-16">
      <i class="icon ion-help"></i>
    </span><span class="step size-18">
      <i class="icon ion-help"></i>
    </span><span class="step size-21">
      <i class="icon ion-help"></i>
    </span><span class="step size-24">
      <i class="icon ion-help"></i>
    </span><span class="step size-32">
      <i class="icon ion-help"></i>
    </span><span class="step size-48">
      <i class="icon ion-help"></i>
    </span><span class="step size-64">
      <i class="icon ion-help"></i>
    </span><span class="step size-96">
      <i class="icon ion-help"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-help" />

    <label>Selectable:</label>
    <span class="ion">&#xf143;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf143;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f143" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-14">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-16">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-18">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-21">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-24">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-32">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-48">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-64">
      <i class="icon ion-help-buoy"></i>
    </span><span class="step size-96">
      <i class="icon ion-help-buoy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-help-buoy" />

    <label>Selectable:</label>
    <span class="ion">&#xf27c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-help-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-help-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-help-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf142;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf142;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f142" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-home"></i>
    </span><span class="step size-14">
      <i class="icon ion-home"></i>
    </span><span class="step size-16">
      <i class="icon ion-home"></i>
    </span><span class="step size-18">
      <i class="icon ion-home"></i>
    </span><span class="step size-21">
      <i class="icon ion-home"></i>
    </span><span class="step size-24">
      <i class="icon ion-home"></i>
    </span><span class="step size-32">
      <i class="icon ion-home"></i>
    </span><span class="step size-48">
      <i class="icon ion-home"></i>
    </span><span class="step size-64">
      <i class="icon ion-home"></i>
    </span><span class="step size-96">
      <i class="icon ion-home"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-home" />

    <label>Selectable:</label>
    <span class="ion">&#xf144;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf144;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f144" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-14">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-16">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-18">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-21">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-24">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-32">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-48">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-64">
      <i class="icon ion-icecream"></i>
    </span><span class="step size-96">
      <i class="icon ion-icecream"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-icecream" />

    <label>Selectable:</label>
    <span class="ion">&#xf27d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-14">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-16">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-18">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-21">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-24">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-32">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-48">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-64">
      <i class="icon ion-icon-social-google-plus"></i>
    </span><span class="step size-96">
      <i class="icon ion-icon-social-google-plus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-icon-social-google-plus" />

    <label>Selectable:</label>
    <span class="ion">&#xf146;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf146;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f146" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-icon-social-google-plus-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-icon-social-google-plus-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf145;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf145;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f145" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-image"></i>
    </span><span class="step size-14">
      <i class="icon ion-image"></i>
    </span><span class="step size-16">
      <i class="icon ion-image"></i>
    </span><span class="step size-18">
      <i class="icon ion-image"></i>
    </span><span class="step size-21">
      <i class="icon ion-image"></i>
    </span><span class="step size-24">
      <i class="icon ion-image"></i>
    </span><span class="step size-32">
      <i class="icon ion-image"></i>
    </span><span class="step size-48">
      <i class="icon ion-image"></i>
    </span><span class="step size-64">
      <i class="icon ion-image"></i>
    </span><span class="step size-96">
      <i class="icon ion-image"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-image" />

    <label>Selectable:</label>
    <span class="ion">&#xf147;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf147;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f147" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-images"></i>
    </span><span class="step size-14">
      <i class="icon ion-images"></i>
    </span><span class="step size-16">
      <i class="icon ion-images"></i>
    </span><span class="step size-18">
      <i class="icon ion-images"></i>
    </span><span class="step size-21">
      <i class="icon ion-images"></i>
    </span><span class="step size-24">
      <i class="icon ion-images"></i>
    </span><span class="step size-32">
      <i class="icon ion-images"></i>
    </span><span class="step size-48">
      <i class="icon ion-images"></i>
    </span><span class="step size-64">
      <i class="icon ion-images"></i>
    </span><span class="step size-96">
      <i class="icon ion-images"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-images" />

    <label>Selectable:</label>
    <span class="ion">&#xf148;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf148;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f148" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-information"></i>
    </span><span class="step size-14">
      <i class="icon ion-information"></i>
    </span><span class="step size-16">
      <i class="icon ion-information"></i>
    </span><span class="step size-18">
      <i class="icon ion-information"></i>
    </span><span class="step size-21">
      <i class="icon ion-information"></i>
    </span><span class="step size-24">
      <i class="icon ion-information"></i>
    </span><span class="step size-32">
      <i class="icon ion-information"></i>
    </span><span class="step size-48">
      <i class="icon ion-information"></i>
    </span><span class="step size-64">
      <i class="icon ion-information"></i>
    </span><span class="step size-96">
      <i class="icon ion-information"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-information" />

    <label>Selectable:</label>
    <span class="ion">&#xf14a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-information-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-information-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-information-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf149;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf149;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f149" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-14">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-16">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-18">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-21">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-24">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-32">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-48">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-64">
      <i class="icon ion-ionic"></i>
    </span><span class="step size-96">
      <i class="icon ion-ionic"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ionic" />

    <label>Selectable:</label>
    <span class="ion">&#xf14b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-alarm"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-alarm"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-alarm" />

    <label>Selectable:</label>
    <span class="ion">&#xf14d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-alarm-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-alarm-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf14c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-albums"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-albums"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-albums" />

    <label>Selectable:</label>
    <span class="ion">&#xf14f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-albums-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-albums-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-albums-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf14e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f14e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-americanfootball"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-americanfootball"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-americanfootball" />

    <label>Selectable:</label>
    <span class="ion">&#xf31f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-americanfootball-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-americanfootball-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf31e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf31e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f31e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-analytics"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-analytics"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-analytics" />

    <label>Selectable:</label>
    <span class="ion">&#xf321;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf321;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f321" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-analytics-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-analytics-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf320;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf320;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f320" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-back"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-back"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-back" />

    <label>Selectable:</label>
    <span class="ion">&#xf150;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf150;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f150" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-down"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-down"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-down" />

    <label>Selectable:</label>
    <span class="ion">&#xf151;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf151;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f151" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-forward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-forward" />

    <label>Selectable:</label>
    <span class="ion">&#xf152;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf152;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f152" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf153;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf153;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f153" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf154;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf154;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f154" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-thin-down"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-thin-down" />

    <label>Selectable:</label>
    <span class="ion">&#xf27e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-thin-left"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-thin-left" />

    <label>Selectable:</label>
    <span class="ion">&#xf27f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf27f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f27f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-thin-right"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-thin-right" />

    <label>Selectable:</label>
    <span class="ion">&#xf280;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf280;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f280" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-thin-up"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-thin-up" />

    <label>Selectable:</label>
    <span class="ion">&#xf281;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf281;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f281" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-arrow-up"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-arrow-up"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-arrow-up" />

    <label>Selectable:</label>
    <span class="ion">&#xf155;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf155;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f155" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-at"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-at"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-at" />

    <label>Selectable:</label>
    <span class="ion">&#xf157;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf157;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f157" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-at-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-at-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-at-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf156;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf156;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f156" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-barcode"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-barcode"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-barcode" />

    <label>Selectable:</label>
    <span class="ion">&#xf323;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf323;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f323" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-barcode-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-barcode-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf322;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf322;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f322" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-baseball"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-baseball"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-baseball" />

    <label>Selectable:</label>
    <span class="ion">&#xf325;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf325;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f325" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-baseball-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-baseball-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf324;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf324;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f324" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-basketball"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-basketball"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-basketball" />

    <label>Selectable:</label>
    <span class="ion">&#xf327;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf327;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f327" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-basketball-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-basketball-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf326;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf326;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f326" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bell"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bell"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bell" />

    <label>Selectable:</label>
    <span class="ion">&#xf159;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf159;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f159" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bell-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bell-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bell-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf158;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf158;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f158" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bolt"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bolt"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bolt" />

    <label>Selectable:</label>
    <span class="ion">&#xf15b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bolt-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bolt-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf15a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bookmarks"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bookmarks"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bookmarks" />

    <label>Selectable:</label>
    <span class="ion">&#xf15d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-bookmarks-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-bookmarks-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf15c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-box"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-box"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-box" />

    <label>Selectable:</label>
    <span class="ion">&#xf15f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-box-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-box-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-box-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf15e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f15e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-briefcase"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-briefcase"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-briefcase" />

    <label>Selectable:</label>
    <span class="ion">&#xf283;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf283;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f283" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-briefcase-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-briefcase-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf282;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf282;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f282" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-browsers"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-browsers"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-browsers" />

    <label>Selectable:</label>
    <span class="ion">&#xf161;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf161;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f161" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-browsers-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-browsers-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf160;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf160;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f160" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-calculator"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-calculator"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-calculator" />

    <label>Selectable:</label>
    <span class="ion">&#xf285;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf285;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f285" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-calculator-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-calculator-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf284;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf284;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f284" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-calendar"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-calendar"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-calendar" />

    <label>Selectable:</label>
    <span class="ion">&#xf163;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf163;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f163" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-calendar-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-calendar-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf162;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf162;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f162" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-camera"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-camera"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-camera" />

    <label>Selectable:</label>
    <span class="ion">&#xf165;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf165;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f165" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-camera-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-camera-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-camera-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf164;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf164;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f164" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cart"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cart"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cart" />

    <label>Selectable:</label>
    <span class="ion">&#xf167;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf167;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f167" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cart-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cart-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cart-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf166;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf166;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f166" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-chatboxes"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-chatboxes"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-chatboxes" />

    <label>Selectable:</label>
    <span class="ion">&#xf169;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf169;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f169" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-chatboxes-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-chatboxes-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf168;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf168;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f168" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-chatbubble"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-chatbubble"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-chatbubble" />

    <label>Selectable:</label>
    <span class="ion">&#xf16b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-chatbubble-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-chatbubble-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf16a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-checkmark"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-checkmark"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-checkmark" />

    <label>Selectable:</label>
    <span class="ion">&#xf16e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-checkmark-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-checkmark-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf16c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-checkmark-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-checkmark-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf16d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-circle-filled"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-circle-filled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-circle-filled" />

    <label>Selectable:</label>
    <span class="ion">&#xf16f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf16f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f16f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-circle-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-circle-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-circle-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf170;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf170;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f170" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-clock"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-clock"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-clock" />

    <label>Selectable:</label>
    <span class="ion">&#xf172;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf172;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f172" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-clock-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-clock-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-clock-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf171;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf171;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f171" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-close"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-close"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-close" />

    <label>Selectable:</label>
    <span class="ion">&#xf2bc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2bc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2bc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-close-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-close-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-close-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf2bd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2bd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2bd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-close-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-close-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-close-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf2bb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2bb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2bb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud" />

    <label>Selectable:</label>
    <span class="ion">&#xf178;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf178;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f178" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud-download"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud-download"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud-download" />

    <label>Selectable:</label>
    <span class="ion">&#xf174;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf174;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f174" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud-download-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud-download-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf173;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf173;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f173" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf175;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf175;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f175" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud-upload"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud-upload" />

    <label>Selectable:</label>
    <span class="ion">&#xf177;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf177;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f177" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloud-upload-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloud-upload-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf176;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf176;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f176" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloudy"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloudy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloudy" />

    <label>Selectable:</label>
    <span class="ion">&#xf17a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloudy-night"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloudy-night" />

    <label>Selectable:</label>
    <span class="ion">&#xf308;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf308;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f308" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloudy-night-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloudy-night-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf307;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf307;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f307" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cloudy-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cloudy-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf179;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf179;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f179" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cog"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cog"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cog" />

    <label>Selectable:</label>
    <span class="ion">&#xf17c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-cog-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-cog-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-cog-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf17b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-compose"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-compose"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-compose" />

    <label>Selectable:</label>
    <span class="ion">&#xf17e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-compose-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-compose-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-compose-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf17d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-contact"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-contact"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-contact" />

    <label>Selectable:</label>
    <span class="ion">&#xf180;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf180;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f180" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-contact-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-contact-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-contact-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf17f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf17f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f17f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-copy"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-copy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-copy" />

    <label>Selectable:</label>
    <span class="ion">&#xf182;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf182;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f182" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-copy-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-copy-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-copy-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf181;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf181;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f181" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-download"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-download"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-download" />

    <label>Selectable:</label>
    <span class="ion">&#xf184;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf184;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f184" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-download-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-download-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-download-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf183;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf183;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f183" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-drag"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-drag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-drag" />

    <label>Selectable:</label>
    <span class="ion">&#xf185;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf185;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f185" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-email"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-email"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-email" />

    <label>Selectable:</label>
    <span class="ion">&#xf187;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf187;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f187" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-email-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-email-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-email-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf186;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf186;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f186" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-expand"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-expand"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-expand" />

    <label>Selectable:</label>
    <span class="ion">&#xf30d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-eye"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-eye"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-eye" />

    <label>Selectable:</label>
    <span class="ion">&#xf189;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf189;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f189" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-eye-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-eye-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-eye-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf188;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf188;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f188" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-fastforward"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-fastforward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-fastforward" />

    <label>Selectable:</label>
    <span class="ion">&#xf18b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-fastforward-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-fastforward-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf18a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-filing"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-filing"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-filing" />

    <label>Selectable:</label>
    <span class="ion">&#xf18d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-filing-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-filing-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-filing-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf18c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-film"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-film"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-film" />

    <label>Selectable:</label>
    <span class="ion">&#xf18f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-film-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-film-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-film-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf18e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf18e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f18e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-flag"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-flag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-flag" />

    <label>Selectable:</label>
    <span class="ion">&#xf191;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf191;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f191" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-flag-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-flag-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-flag-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf190;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf190;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f190" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-folder"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-folder"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-folder" />

    <label>Selectable:</label>
    <span class="ion">&#xf193;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf193;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f193" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-folder-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-folder-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-folder-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf192;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf192;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f192" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-football"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-football"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-football" />

    <label>Selectable:</label>
    <span class="ion">&#xf329;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf329;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f329" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-football-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-football-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-football-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf328;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf328;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f328" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-gear"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-gear"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-gear" />

    <label>Selectable:</label>
    <span class="ion">&#xf195;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf195;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f195" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-gear-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-gear-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-gear-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf194;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf194;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f194" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-glasses"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-glasses"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-glasses" />

    <label>Selectable:</label>
    <span class="ion">&#xf197;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf197;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f197" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-glasses-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-glasses-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf196;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf196;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f196" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-heart"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-heart"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-heart" />

    <label>Selectable:</label>
    <span class="ion">&#xf199;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf199;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f199" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-heart-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-heart-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-heart-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf198;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf198;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f198" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-help"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-help"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-help" />

    <label>Selectable:</label>
    <span class="ion">&#xf19c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-help-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-help-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-help-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf19a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-help-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-help-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-help-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf19b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-home"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-home"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-home" />

    <label>Selectable:</label>
    <span class="ion">&#xf32b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-home-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-home-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-home-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf32a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-infinite"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-infinite"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-infinite" />

    <label>Selectable:</label>
    <span class="ion">&#xf19e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-infinite-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-infinite-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf19d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-information"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-information"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-information" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-information-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-information-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-information-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf19f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf19f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f19f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-information-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-information-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-information-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-ionic-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-ionic-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-keypad"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-keypad"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-keypad" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-keypad-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-keypad-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-lightbulb"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-lightbulb"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-lightbulb" />

    <label>Selectable:</label>
    <span class="ion">&#xf287;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf287;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f287" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-lightbulb-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-lightbulb-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf286;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf286;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f286" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-location"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-location"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-location" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-location-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-location-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-location-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-locked"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-locked"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-locked" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-locked-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-locked-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-locked-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-loop"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-loop"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-loop" />

    <label>Selectable:</label>
    <span class="ion">&#xf32d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-loop-strong"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-loop-strong"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-loop-strong" />

    <label>Selectable:</label>
    <span class="ion">&#xf32c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-medkit"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-medkit"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-medkit" />

    <label>Selectable:</label>
    <span class="ion">&#xf289;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf289;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f289" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-medkit-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-medkit-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf288;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf288;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f288" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-mic"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-mic"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-mic" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ab;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ab;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ab" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-mic-off"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-mic-off"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-mic-off" />

    <label>Selectable:</label>
    <span class="ion">&#xf1a9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1a9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1a9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-mic-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-mic-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-mic-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1aa;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1aa;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1aa" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-minus"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-minus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-minus" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ae;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ae;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ae" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-minus-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-minus-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-minus-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ac;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ac;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ac" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-minus-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-minus-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-minus-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ad;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ad;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ad" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-monitor"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-monitor"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-monitor" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-monitor-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-monitor-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1af;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1af;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1af" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-moon"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-moon"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-moon" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-moon-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-moon-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-moon-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-more"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-more"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-more" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-more-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-more-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-more-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-musical-note"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-musical-note"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-musical-note" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-musical-notes"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-musical-notes"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-musical-notes" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-navigate"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-navigate"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-navigate" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-navigate-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-navigate-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paper"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paper"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paper" />

    <label>Selectable:</label>
    <span class="ion">&#xf32f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paper-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paper-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paper-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf32e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf32e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f32e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paperplane"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paperplane"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paperplane" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ba;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ba;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ba" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paperplane-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paperplane-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1b9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1b9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1b9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-partlysunny"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-partlysunny"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-partlysunny" />

    <label>Selectable:</label>
    <span class="ion">&#xf1bc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1bc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-partlysunny-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-partlysunny-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1bb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1bb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pause"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pause"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pause" />

    <label>Selectable:</label>
    <span class="ion">&#xf1be;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1be;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1be" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pause-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pause-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pause-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1bd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1bd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paw"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paw"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paw" />

    <label>Selectable:</label>
    <span class="ion">&#xf331;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf331;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f331" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-paw-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-paw-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-paw-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf330;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf330;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f330" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-people"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-people"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-people" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-people-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-people-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-people-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1bf;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1bf;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1bf" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-person"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-person"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-person" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-person-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-person-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-person-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-personadd"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-personadd"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-personadd" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-personadd-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-personadd-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-photos"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-photos"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-photos" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-photos-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-photos-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-photos-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pie"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pie"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pie" />

    <label>Selectable:</label>
    <span class="ion">&#xf28b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pie-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pie-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pie-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf28a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-play"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-play"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-play" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-play-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-play-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-play-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-plus"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-plus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-plus" />

    <label>Selectable:</label>
    <span class="ion">&#xf1cb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1cb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-plus-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-plus-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-plus-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf1c9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1c9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1c9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-plus-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-plus-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-plus-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ca;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ca;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ca" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pricetag"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pricetag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pricetag" />

    <label>Selectable:</label>
    <span class="ion">&#xf28d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pricetag-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pricetag-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf28c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pricetags"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pricetags"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pricetags" />

    <label>Selectable:</label>
    <span class="ion">&#xf333;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf333;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f333" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pricetags-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pricetags-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf332;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf332;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f332" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-printer"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-printer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-printer" />

    <label>Selectable:</label>
    <span class="ion">&#xf1cd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1cd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-printer-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-printer-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-printer-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1cc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1cc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pulse"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pulse"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pulse" />

    <label>Selectable:</label>
    <span class="ion">&#xf335;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf335;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f335" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-pulse-strong"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-pulse-strong" />

    <label>Selectable:</label>
    <span class="ion">&#xf334;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf334;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f334" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-rainy"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-rainy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-rainy" />

    <label>Selectable:</label>
    <span class="ion">&#xf1cf;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1cf;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1cf" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-rainy-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-rainy-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ce;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ce;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ce" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-recording"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-recording"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-recording" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-recording-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-recording-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-recording-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-redo"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-redo"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-redo" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-redo-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-redo-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-redo-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-refresh"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-refresh"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-refresh" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-refresh-empty"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-refresh-empty" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-refresh-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-refresh-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-reload"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-reload"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-reload" />

    <label>Selectable:</label>
    <span class="ion">&#xf28e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-reverse-camera"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-reverse-camera" />

    <label>Selectable:</label>
    <span class="ion">&#xf337;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf337;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f337" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-reverse-camera-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-reverse-camera-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf336;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf336;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f336" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-rewind"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-rewind"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-rewind" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-rewind-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-rewind-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-search"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-search"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-search" />

    <label>Selectable:</label>
    <span class="ion">&#xf1da;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1da;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1da" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-search-strong"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-search-strong"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-search-strong" />

    <label>Selectable:</label>
    <span class="ion">&#xf1d9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1d9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1d9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-settings"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-settings"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-settings" />

    <label>Selectable:</label>
    <span class="ion">&#xf339;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf339;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f339" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-settings-strong"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-settings-strong"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-settings-strong" />

    <label>Selectable:</label>
    <span class="ion">&#xf338;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf338;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f338" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-shrink"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-shrink"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-shrink" />

    <label>Selectable:</label>
    <span class="ion">&#xf30e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-skipbackward"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-skipbackward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-skipbackward" />

    <label>Selectable:</label>
    <span class="ion">&#xf1dc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1dc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1dc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-skipbackward-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-skipbackward-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1db;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1db;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1db" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-skipforward"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-skipforward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-skipforward" />

    <label>Selectable:</label>
    <span class="ion">&#xf1de;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1de;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1de" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-skipforward-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-skipforward-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1dd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1dd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1dd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-snowy"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-snowy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-snowy" />

    <label>Selectable:</label>
    <span class="ion">&#xf309;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf309;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f309" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-speedometer"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-speedometer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-speedometer" />

    <label>Selectable:</label>
    <span class="ion">&#xf290;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf290;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f290" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-speedometer-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-speedometer-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf28f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf28f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f28f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-star"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-star"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-star" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-star-half"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-star-half"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-star-half" />

    <label>Selectable:</label>
    <span class="ion">&#xf33a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-star-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-star-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-star-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1df;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1df;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1df" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-stopwatch"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-stopwatch"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-stopwatch" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-stopwatch-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-stopwatch-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-sunny"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-sunny"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-sunny" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-sunny-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-sunny-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-telephone"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-telephone"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-telephone" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-telephone-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-telephone-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-tennisball"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-tennisball"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-tennisball" />

    <label>Selectable:</label>
    <span class="ion">&#xf33c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-tennisball-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-tennisball-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf33b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-thunderstorm"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-thunderstorm" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-thunderstorm-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-thunderstorm-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-time"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-time"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-time" />

    <label>Selectable:</label>
    <span class="ion">&#xf292;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf292;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f292" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-time-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-time-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-time-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf291;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf291;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f291" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-timer"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-timer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-timer" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ea;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ea;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ea" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-timer-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-timer-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-timer-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1e9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1e9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1e9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-toggle"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-toggle"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-toggle" />

    <label>Selectable:</label>
    <span class="ion">&#xf33e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-toggle-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-toggle-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf33d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-trash"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-trash"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-trash" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ec;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ec;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ec" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-trash-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-trash-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-trash-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1eb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1eb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1eb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-undo"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-undo"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-undo" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ee;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ee;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ee" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-undo-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-undo-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-undo-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ed;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ed;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ed" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-unlocked"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-unlocked"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-unlocked" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-unlocked-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-unlocked-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ef;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ef;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ef" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-upload"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-upload"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-upload" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-upload-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-upload-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-upload-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-videocam"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-videocam"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-videocam" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-videocam-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-videocam-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-volume-high"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-volume-high"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-volume-high" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-volume-low"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-volume-low"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-volume-low" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-wineglass"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-wineglass"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-wineglass" />

    <label>Selectable:</label>
    <span class="ion">&#xf294;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf294;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f294" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-wineglass-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-wineglass-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf293;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf293;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f293" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-world"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-world"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-world" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-ios7-world-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-ios7-world-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios7-world-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-14">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-16">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-18">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-21">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-24">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-32">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-48">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-64">
      <i class="icon ion-ipad"></i>
    </span><span class="step size-96">
      <i class="icon ion-ipad"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ipad" />

    <label>Selectable:</label>
    <span class="ion">&#xf1f9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1f9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1f9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-14">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-16">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-18">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-21">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-24">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-32">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-48">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-64">
      <i class="icon ion-iphone"></i>
    </span><span class="step size-96">
      <i class="icon ion-iphone"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-iphone" />

    <label>Selectable:</label>
    <span class="ion">&#xf1fa;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fa;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1fa" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-14">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-16">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-18">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-21">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-24">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-32">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-48">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-64">
      <i class="icon ion-ipod"></i>
    </span><span class="step size-96">
      <i class="icon ion-ipod"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ipod" />

    <label>Selectable:</label>
    <span class="ion">&#xf1fb;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fb;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1fb" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-jet"></i>
    </span><span class="step size-14">
      <i class="icon ion-jet"></i>
    </span><span class="step size-16">
      <i class="icon ion-jet"></i>
    </span><span class="step size-18">
      <i class="icon ion-jet"></i>
    </span><span class="step size-21">
      <i class="icon ion-jet"></i>
    </span><span class="step size-24">
      <i class="icon ion-jet"></i>
    </span><span class="step size-32">
      <i class="icon ion-jet"></i>
    </span><span class="step size-48">
      <i class="icon ion-jet"></i>
    </span><span class="step size-64">
      <i class="icon ion-jet"></i>
    </span><span class="step size-96">
      <i class="icon ion-jet"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-jet" />

    <label>Selectable:</label>
    <span class="ion">&#xf295;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf295;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f295" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-key"></i>
    </span><span class="step size-14">
      <i class="icon ion-key"></i>
    </span><span class="step size-16">
      <i class="icon ion-key"></i>
    </span><span class="step size-18">
      <i class="icon ion-key"></i>
    </span><span class="step size-21">
      <i class="icon ion-key"></i>
    </span><span class="step size-24">
      <i class="icon ion-key"></i>
    </span><span class="step size-32">
      <i class="icon ion-key"></i>
    </span><span class="step size-48">
      <i class="icon ion-key"></i>
    </span><span class="step size-64">
      <i class="icon ion-key"></i>
    </span><span class="step size-96">
      <i class="icon ion-key"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-key" />

    <label>Selectable:</label>
    <span class="ion">&#xf296;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf296;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f296" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-knife"></i>
    </span><span class="step size-14">
      <i class="icon ion-knife"></i>
    </span><span class="step size-16">
      <i class="icon ion-knife"></i>
    </span><span class="step size-18">
      <i class="icon ion-knife"></i>
    </span><span class="step size-21">
      <i class="icon ion-knife"></i>
    </span><span class="step size-24">
      <i class="icon ion-knife"></i>
    </span><span class="step size-32">
      <i class="icon ion-knife"></i>
    </span><span class="step size-48">
      <i class="icon ion-knife"></i>
    </span><span class="step size-64">
      <i class="icon ion-knife"></i>
    </span><span class="step size-96">
      <i class="icon ion-knife"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-knife" />

    <label>Selectable:</label>
    <span class="ion">&#xf297;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf297;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f297" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-14">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-16">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-18">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-21">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-24">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-32">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-48">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-64">
      <i class="icon ion-laptop"></i>
    </span><span class="step size-96">
      <i class="icon ion-laptop"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-laptop" />

    <label>Selectable:</label>
    <span class="ion">&#xf1fc;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fc;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1fc" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-14">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-16">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-18">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-21">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-24">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-32">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-48">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-64">
      <i class="icon ion-leaf"></i>
    </span><span class="step size-96">
      <i class="icon ion-leaf"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-leaf" />

    <label>Selectable:</label>
    <span class="ion">&#xf1fd;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fd;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1fd" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-levels"></i>
    </span><span class="step size-14">
      <i class="icon ion-levels"></i>
    </span><span class="step size-16">
      <i class="icon ion-levels"></i>
    </span><span class="step size-18">
      <i class="icon ion-levels"></i>
    </span><span class="step size-21">
      <i class="icon ion-levels"></i>
    </span><span class="step size-24">
      <i class="icon ion-levels"></i>
    </span><span class="step size-32">
      <i class="icon ion-levels"></i>
    </span><span class="step size-48">
      <i class="icon ion-levels"></i>
    </span><span class="step size-64">
      <i class="icon ion-levels"></i>
    </span><span class="step size-96">
      <i class="icon ion-levels"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-levels" />

    <label>Selectable:</label>
    <span class="ion">&#xf298;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf298;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f298" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-14">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-16">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-18">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-21">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-24">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-32">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-48">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-64">
      <i class="icon ion-lightbulb"></i>
    </span><span class="step size-96">
      <i class="icon ion-lightbulb"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-lightbulb" />

    <label>Selectable:</label>
    <span class="ion">&#xf299;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf299;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f299" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-link"></i>
    </span><span class="step size-14">
      <i class="icon ion-link"></i>
    </span><span class="step size-16">
      <i class="icon ion-link"></i>
    </span><span class="step size-18">
      <i class="icon ion-link"></i>
    </span><span class="step size-21">
      <i class="icon ion-link"></i>
    </span><span class="step size-24">
      <i class="icon ion-link"></i>
    </span><span class="step size-32">
      <i class="icon ion-link"></i>
    </span><span class="step size-48">
      <i class="icon ion-link"></i>
    </span><span class="step size-64">
      <i class="icon ion-link"></i>
    </span><span class="step size-96">
      <i class="icon ion-link"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-link" />

    <label>Selectable:</label>
    <span class="ion">&#xf1fe;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1fe;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1fe" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-load-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-load-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-load-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf29a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-load-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-load-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-load-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf29b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-load-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-load-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-load-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf29c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-14">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-16">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-18">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-21">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-24">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-32">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-48">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-64">
      <i class="icon ion-load-d"></i>
    </span><span class="step size-96">
      <i class="icon ion-load-d"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-load-d" />

    <label>Selectable:</label>
    <span class="ion">&#xf29d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-location"></i>
    </span><span class="step size-14">
      <i class="icon ion-location"></i>
    </span><span class="step size-16">
      <i class="icon ion-location"></i>
    </span><span class="step size-18">
      <i class="icon ion-location"></i>
    </span><span class="step size-21">
      <i class="icon ion-location"></i>
    </span><span class="step size-24">
      <i class="icon ion-location"></i>
    </span><span class="step size-32">
      <i class="icon ion-location"></i>
    </span><span class="step size-48">
      <i class="icon ion-location"></i>
    </span><span class="step size-64">
      <i class="icon ion-location"></i>
    </span><span class="step size-96">
      <i class="icon ion-location"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-location" />

    <label>Selectable:</label>
    <span class="ion">&#xf1ff;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf1ff;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f1ff" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-locked"></i>
    </span><span class="step size-14">
      <i class="icon ion-locked"></i>
    </span><span class="step size-16">
      <i class="icon ion-locked"></i>
    </span><span class="step size-18">
      <i class="icon ion-locked"></i>
    </span><span class="step size-21">
      <i class="icon ion-locked"></i>
    </span><span class="step size-24">
      <i class="icon ion-locked"></i>
    </span><span class="step size-32">
      <i class="icon ion-locked"></i>
    </span><span class="step size-48">
      <i class="icon ion-locked"></i>
    </span><span class="step size-64">
      <i class="icon ion-locked"></i>
    </span><span class="step size-96">
      <i class="icon ion-locked"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-locked" />

    <label>Selectable:</label>
    <span class="ion">&#xf200;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf200;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f200" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-14">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-16">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-18">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-21">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-24">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-32">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-48">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-64">
      <i class="icon ion-log-in"></i>
    </span><span class="step size-96">
      <i class="icon ion-log-in"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-log-in" />

    <label>Selectable:</label>
    <span class="ion">&#xf29e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-14">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-16">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-18">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-21">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-24">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-32">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-48">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-64">
      <i class="icon ion-log-out"></i>
    </span><span class="step size-96">
      <i class="icon ion-log-out"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-log-out" />

    <label>Selectable:</label>
    <span class="ion">&#xf29f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf29f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f29f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-loop"></i>
    </span><span class="step size-14">
      <i class="icon ion-loop"></i>
    </span><span class="step size-16">
      <i class="icon ion-loop"></i>
    </span><span class="step size-18">
      <i class="icon ion-loop"></i>
    </span><span class="step size-21">
      <i class="icon ion-loop"></i>
    </span><span class="step size-24">
      <i class="icon ion-loop"></i>
    </span><span class="step size-32">
      <i class="icon ion-loop"></i>
    </span><span class="step size-48">
      <i class="icon ion-loop"></i>
    </span><span class="step size-64">
      <i class="icon ion-loop"></i>
    </span><span class="step size-96">
      <i class="icon ion-loop"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-loop" />

    <label>Selectable:</label>
    <span class="ion">&#xf201;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf201;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f201" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-14">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-16">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-18">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-21">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-24">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-32">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-48">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-64">
      <i class="icon ion-magnet"></i>
    </span><span class="step size-96">
      <i class="icon ion-magnet"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-magnet" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-male"></i>
    </span><span class="step size-14">
      <i class="icon ion-male"></i>
    </span><span class="step size-16">
      <i class="icon ion-male"></i>
    </span><span class="step size-18">
      <i class="icon ion-male"></i>
    </span><span class="step size-21">
      <i class="icon ion-male"></i>
    </span><span class="step size-24">
      <i class="icon ion-male"></i>
    </span><span class="step size-32">
      <i class="icon ion-male"></i>
    </span><span class="step size-48">
      <i class="icon ion-male"></i>
    </span><span class="step size-64">
      <i class="icon ion-male"></i>
    </span><span class="step size-96">
      <i class="icon ion-male"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-male" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-man"></i>
    </span><span class="step size-14">
      <i class="icon ion-man"></i>
    </span><span class="step size-16">
      <i class="icon ion-man"></i>
    </span><span class="step size-18">
      <i class="icon ion-man"></i>
    </span><span class="step size-21">
      <i class="icon ion-man"></i>
    </span><span class="step size-24">
      <i class="icon ion-man"></i>
    </span><span class="step size-32">
      <i class="icon ion-man"></i>
    </span><span class="step size-48">
      <i class="icon ion-man"></i>
    </span><span class="step size-64">
      <i class="icon ion-man"></i>
    </span><span class="step size-96">
      <i class="icon ion-man"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-man" />

    <label>Selectable:</label>
    <span class="ion">&#xf202;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf202;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f202" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-map"></i>
    </span><span class="step size-14">
      <i class="icon ion-map"></i>
    </span><span class="step size-16">
      <i class="icon ion-map"></i>
    </span><span class="step size-18">
      <i class="icon ion-map"></i>
    </span><span class="step size-21">
      <i class="icon ion-map"></i>
    </span><span class="step size-24">
      <i class="icon ion-map"></i>
    </span><span class="step size-32">
      <i class="icon ion-map"></i>
    </span><span class="step size-48">
      <i class="icon ion-map"></i>
    </span><span class="step size-64">
      <i class="icon ion-map"></i>
    </span><span class="step size-96">
      <i class="icon ion-map"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-map" />

    <label>Selectable:</label>
    <span class="ion">&#xf203;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf203;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f203" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-14">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-16">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-18">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-21">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-24">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-32">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-48">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-64">
      <i class="icon ion-medkit"></i>
    </span><span class="step size-96">
      <i class="icon ion-medkit"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-medkit" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-merge"></i>
    </span><span class="step size-14">
      <i class="icon ion-merge"></i>
    </span><span class="step size-16">
      <i class="icon ion-merge"></i>
    </span><span class="step size-18">
      <i class="icon ion-merge"></i>
    </span><span class="step size-21">
      <i class="icon ion-merge"></i>
    </span><span class="step size-24">
      <i class="icon ion-merge"></i>
    </span><span class="step size-32">
      <i class="icon ion-merge"></i>
    </span><span class="step size-48">
      <i class="icon ion-merge"></i>
    </span><span class="step size-64">
      <i class="icon ion-merge"></i>
    </span><span class="step size-96">
      <i class="icon ion-merge"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-merge" />

    <label>Selectable:</label>
    <span class="ion">&#xf33f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf33f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f33f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-mic-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-mic-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-mic-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf204;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf204;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f204" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-mic-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-mic-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-mic-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf205;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf205;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f205" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-14">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-16">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-18">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-21">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-24">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-32">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-48">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-64">
      <i class="icon ion-mic-c"></i>
    </span><span class="step size-96">
      <i class="icon ion-mic-c"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-mic-c" />

    <label>Selectable:</label>
    <span class="ion">&#xf206;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf206;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f206" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-minus"></i>
    </span><span class="step size-14">
      <i class="icon ion-minus"></i>
    </span><span class="step size-16">
      <i class="icon ion-minus"></i>
    </span><span class="step size-18">
      <i class="icon ion-minus"></i>
    </span><span class="step size-21">
      <i class="icon ion-minus"></i>
    </span><span class="step size-24">
      <i class="icon ion-minus"></i>
    </span><span class="step size-32">
      <i class="icon ion-minus"></i>
    </span><span class="step size-48">
      <i class="icon ion-minus"></i>
    </span><span class="step size-64">
      <i class="icon ion-minus"></i>
    </span><span class="step size-96">
      <i class="icon ion-minus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-minus" />

    <label>Selectable:</label>
    <span class="ion">&#xf209;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf209;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f209" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-minus-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-minus-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-minus-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf207;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf207;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f207" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-14">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-16">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-18">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-21">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-24">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-32">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-48">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-64">
      <i class="icon ion-minus-round"></i>
    </span><span class="step size-96">
      <i class="icon ion-minus-round"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-minus-round" />

    <label>Selectable:</label>
    <span class="ion">&#xf208;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf208;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f208" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-14">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-16">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-18">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-21">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-24">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-32">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-48">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-64">
      <i class="icon ion-model-s"></i>
    </span><span class="step size-96">
      <i class="icon ion-model-s"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-model-s" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-14">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-16">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-18">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-21">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-24">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-32">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-48">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-64">
      <i class="icon ion-monitor"></i>
    </span><span class="step size-96">
      <i class="icon ion-monitor"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-monitor" />

    <label>Selectable:</label>
    <span class="ion">&#xf20a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-more"></i>
    </span><span class="step size-14">
      <i class="icon ion-more"></i>
    </span><span class="step size-16">
      <i class="icon ion-more"></i>
    </span><span class="step size-18">
      <i class="icon ion-more"></i>
    </span><span class="step size-21">
      <i class="icon ion-more"></i>
    </span><span class="step size-24">
      <i class="icon ion-more"></i>
    </span><span class="step size-32">
      <i class="icon ion-more"></i>
    </span><span class="step size-48">
      <i class="icon ion-more"></i>
    </span><span class="step size-64">
      <i class="icon ion-more"></i>
    </span><span class="step size-96">
      <i class="icon ion-more"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-more" />

    <label>Selectable:</label>
    <span class="ion">&#xf20b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-14">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-16">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-18">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-21">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-24">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-32">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-48">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-64">
      <i class="icon ion-mouse"></i>
    </span><span class="step size-96">
      <i class="icon ion-mouse"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-mouse" />

    <label>Selectable:</label>
    <span class="ion">&#xf340;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf340;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f340" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-14">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-16">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-18">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-21">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-24">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-32">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-48">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-64">
      <i class="icon ion-music-note"></i>
    </span><span class="step size-96">
      <i class="icon ion-music-note"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-music-note" />

    <label>Selectable:</label>
    <span class="ion">&#xf20c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-14">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-16">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-18">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-21">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-24">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-32">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-48">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-64">
      <i class="icon ion-navicon"></i>
    </span><span class="step size-96">
      <i class="icon ion-navicon"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-navicon" />

    <label>Selectable:</label>
    <span class="ion">&#xf20e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-14">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-16">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-18">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-21">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-24">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-32">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-48">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-64">
      <i class="icon ion-navicon-round"></i>
    </span><span class="step size-96">
      <i class="icon ion-navicon-round"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-navicon-round" />

    <label>Selectable:</label>
    <span class="ion">&#xf20d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-14">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-16">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-18">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-21">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-24">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-32">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-48">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-64">
      <i class="icon ion-navigate"></i>
    </span><span class="step size-96">
      <i class="icon ion-navigate"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-navigate" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-network"></i>
    </span><span class="step size-14">
      <i class="icon ion-network"></i>
    </span><span class="step size-16">
      <i class="icon ion-network"></i>
    </span><span class="step size-18">
      <i class="icon ion-network"></i>
    </span><span class="step size-21">
      <i class="icon ion-network"></i>
    </span><span class="step size-24">
      <i class="icon ion-network"></i>
    </span><span class="step size-32">
      <i class="icon ion-network"></i>
    </span><span class="step size-48">
      <i class="icon ion-network"></i>
    </span><span class="step size-64">
      <i class="icon ion-network"></i>
    </span><span class="step size-96">
      <i class="icon ion-network"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-network" />

    <label>Selectable:</label>
    <span class="ion">&#xf341;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf341;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f341" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-14">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-16">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-18">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-21">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-24">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-32">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-48">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-64">
      <i class="icon ion-no-smoking"></i>
    </span><span class="step size-96">
      <i class="icon ion-no-smoking"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-no-smoking" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-14">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-16">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-18">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-21">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-24">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-32">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-48">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-64">
      <i class="icon ion-nuclear"></i>
    </span><span class="step size-96">
      <i class="icon ion-nuclear"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-nuclear" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-14">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-16">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-18">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-21">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-24">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-32">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-48">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-64">
      <i class="icon ion-outlet"></i>
    </span><span class="step size-96">
      <i class="icon ion-outlet"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-outlet" />

    <label>Selectable:</label>
    <span class="ion">&#xf342;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf342;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f342" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-14">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-16">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-18">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-21">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-24">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-32">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-48">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-64">
      <i class="icon ion-paper-airplane"></i>
    </span><span class="step size-96">
      <i class="icon ion-paper-airplane"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-paper-airplane" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-14">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-16">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-18">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-21">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-24">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-32">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-48">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-64">
      <i class="icon ion-paperclip"></i>
    </span><span class="step size-96">
      <i class="icon ion-paperclip"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-paperclip" />

    <label>Selectable:</label>
    <span class="ion">&#xf20f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf20f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f20f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pause"></i>
    </span><span class="step size-14">
      <i class="icon ion-pause"></i>
    </span><span class="step size-16">
      <i class="icon ion-pause"></i>
    </span><span class="step size-18">
      <i class="icon ion-pause"></i>
    </span><span class="step size-21">
      <i class="icon ion-pause"></i>
    </span><span class="step size-24">
      <i class="icon ion-pause"></i>
    </span><span class="step size-32">
      <i class="icon ion-pause"></i>
    </span><span class="step size-48">
      <i class="icon ion-pause"></i>
    </span><span class="step size-64">
      <i class="icon ion-pause"></i>
    </span><span class="step size-96">
      <i class="icon ion-pause"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pause" />

    <label>Selectable:</label>
    <span class="ion">&#xf210;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf210;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f210" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-person"></i>
    </span><span class="step size-14">
      <i class="icon ion-person"></i>
    </span><span class="step size-16">
      <i class="icon ion-person"></i>
    </span><span class="step size-18">
      <i class="icon ion-person"></i>
    </span><span class="step size-21">
      <i class="icon ion-person"></i>
    </span><span class="step size-24">
      <i class="icon ion-person"></i>
    </span><span class="step size-32">
      <i class="icon ion-person"></i>
    </span><span class="step size-48">
      <i class="icon ion-person"></i>
    </span><span class="step size-64">
      <i class="icon ion-person"></i>
    </span><span class="step size-96">
      <i class="icon ion-person"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-person" />

    <label>Selectable:</label>
    <span class="ion">&#xf213;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf213;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f213" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-14">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-16">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-18">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-21">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-24">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-32">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-48">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-64">
      <i class="icon ion-person-add"></i>
    </span><span class="step size-96">
      <i class="icon ion-person-add"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-person-add" />

    <label>Selectable:</label>
    <span class="ion">&#xf211;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf211;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f211" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-14">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-16">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-18">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-21">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-24">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-32">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-48">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-64">
      <i class="icon ion-person-stalker"></i>
    </span><span class="step size-96">
      <i class="icon ion-person-stalker"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-person-stalker" />

    <label>Selectable:</label>
    <span class="ion">&#xf212;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf212;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f212" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-14">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-16">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-18">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-21">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-24">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-32">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-48">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-64">
      <i class="icon ion-pie-graph"></i>
    </span><span class="step size-96">
      <i class="icon ion-pie-graph"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pie-graph" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pin"></i>
    </span><span class="step size-14">
      <i class="icon ion-pin"></i>
    </span><span class="step size-16">
      <i class="icon ion-pin"></i>
    </span><span class="step size-18">
      <i class="icon ion-pin"></i>
    </span><span class="step size-21">
      <i class="icon ion-pin"></i>
    </span><span class="step size-24">
      <i class="icon ion-pin"></i>
    </span><span class="step size-32">
      <i class="icon ion-pin"></i>
    </span><span class="step size-48">
      <i class="icon ion-pin"></i>
    </span><span class="step size-64">
      <i class="icon ion-pin"></i>
    </span><span class="step size-96">
      <i class="icon ion-pin"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pin" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-14">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-16">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-18">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-21">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-24">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-32">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-48">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-64">
      <i class="icon ion-pinpoint"></i>
    </span><span class="step size-96">
      <i class="icon ion-pinpoint"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pinpoint" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-14">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-16">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-18">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-21">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-24">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-32">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-48">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-64">
      <i class="icon ion-pizza"></i>
    </span><span class="step size-96">
      <i class="icon ion-pizza"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pizza" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-plane"></i>
    </span><span class="step size-14">
      <i class="icon ion-plane"></i>
    </span><span class="step size-16">
      <i class="icon ion-plane"></i>
    </span><span class="step size-18">
      <i class="icon ion-plane"></i>
    </span><span class="step size-21">
      <i class="icon ion-plane"></i>
    </span><span class="step size-24">
      <i class="icon ion-plane"></i>
    </span><span class="step size-32">
      <i class="icon ion-plane"></i>
    </span><span class="step size-48">
      <i class="icon ion-plane"></i>
    </span><span class="step size-64">
      <i class="icon ion-plane"></i>
    </span><span class="step size-96">
      <i class="icon ion-plane"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-plane" />

    <label>Selectable:</label>
    <span class="ion">&#xf214;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf214;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f214" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-planet"></i>
    </span><span class="step size-14">
      <i class="icon ion-planet"></i>
    </span><span class="step size-16">
      <i class="icon ion-planet"></i>
    </span><span class="step size-18">
      <i class="icon ion-planet"></i>
    </span><span class="step size-21">
      <i class="icon ion-planet"></i>
    </span><span class="step size-24">
      <i class="icon ion-planet"></i>
    </span><span class="step size-32">
      <i class="icon ion-planet"></i>
    </span><span class="step size-48">
      <i class="icon ion-planet"></i>
    </span><span class="step size-64">
      <i class="icon ion-planet"></i>
    </span><span class="step size-96">
      <i class="icon ion-planet"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-planet" />

    <label>Selectable:</label>
    <span class="ion">&#xf343;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf343;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f343" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-play"></i>
    </span><span class="step size-14">
      <i class="icon ion-play"></i>
    </span><span class="step size-16">
      <i class="icon ion-play"></i>
    </span><span class="step size-18">
      <i class="icon ion-play"></i>
    </span><span class="step size-21">
      <i class="icon ion-play"></i>
    </span><span class="step size-24">
      <i class="icon ion-play"></i>
    </span><span class="step size-32">
      <i class="icon ion-play"></i>
    </span><span class="step size-48">
      <i class="icon ion-play"></i>
    </span><span class="step size-64">
      <i class="icon ion-play"></i>
    </span><span class="step size-96">
      <i class="icon ion-play"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-play" />

    <label>Selectable:</label>
    <span class="ion">&#xf215;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf215;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f215" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-14">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-16">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-18">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-21">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-24">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-32">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-48">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-64">
      <i class="icon ion-playstation"></i>
    </span><span class="step size-96">
      <i class="icon ion-playstation"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-playstation" />

    <label>Selectable:</label>
    <span class="ion">&#xf30a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-plus"></i>
    </span><span class="step size-14">
      <i class="icon ion-plus"></i>
    </span><span class="step size-16">
      <i class="icon ion-plus"></i>
    </span><span class="step size-18">
      <i class="icon ion-plus"></i>
    </span><span class="step size-21">
      <i class="icon ion-plus"></i>
    </span><span class="step size-24">
      <i class="icon ion-plus"></i>
    </span><span class="step size-32">
      <i class="icon ion-plus"></i>
    </span><span class="step size-48">
      <i class="icon ion-plus"></i>
    </span><span class="step size-64">
      <i class="icon ion-plus"></i>
    </span><span class="step size-96">
      <i class="icon ion-plus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-plus" />

    <label>Selectable:</label>
    <span class="ion">&#xf218;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf218;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f218" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-14">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-16">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-18">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-21">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-24">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-32">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-48">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-64">
      <i class="icon ion-plus-circled"></i>
    </span><span class="step size-96">
      <i class="icon ion-plus-circled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-plus-circled" />

    <label>Selectable:</label>
    <span class="ion">&#xf216;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf216;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f216" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-14">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-16">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-18">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-21">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-24">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-32">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-48">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-64">
      <i class="icon ion-plus-round"></i>
    </span><span class="step size-96">
      <i class="icon ion-plus-round"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-plus-round" />

    <label>Selectable:</label>
    <span class="ion">&#xf217;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf217;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f217" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-podium"></i>
    </span><span class="step size-14">
      <i class="icon ion-podium"></i>
    </span><span class="step size-16">
      <i class="icon ion-podium"></i>
    </span><span class="step size-18">
      <i class="icon ion-podium"></i>
    </span><span class="step size-21">
      <i class="icon ion-podium"></i>
    </span><span class="step size-24">
      <i class="icon ion-podium"></i>
    </span><span class="step size-32">
      <i class="icon ion-podium"></i>
    </span><span class="step size-48">
      <i class="icon ion-podium"></i>
    </span><span class="step size-64">
      <i class="icon ion-podium"></i>
    </span><span class="step size-96">
      <i class="icon ion-podium"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-podium" />

    <label>Selectable:</label>
    <span class="ion">&#xf344;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf344;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f344" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pound"></i>
    </span><span class="step size-14">
      <i class="icon ion-pound"></i>
    </span><span class="step size-16">
      <i class="icon ion-pound"></i>
    </span><span class="step size-18">
      <i class="icon ion-pound"></i>
    </span><span class="step size-21">
      <i class="icon ion-pound"></i>
    </span><span class="step size-24">
      <i class="icon ion-pound"></i>
    </span><span class="step size-32">
      <i class="icon ion-pound"></i>
    </span><span class="step size-48">
      <i class="icon ion-pound"></i>
    </span><span class="step size-64">
      <i class="icon ion-pound"></i>
    </span><span class="step size-96">
      <i class="icon ion-pound"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pound" />

    <label>Selectable:</label>
    <span class="ion">&#xf219;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf219;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f219" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-power"></i>
    </span><span class="step size-14">
      <i class="icon ion-power"></i>
    </span><span class="step size-16">
      <i class="icon ion-power"></i>
    </span><span class="step size-18">
      <i class="icon ion-power"></i>
    </span><span class="step size-21">
      <i class="icon ion-power"></i>
    </span><span class="step size-24">
      <i class="icon ion-power"></i>
    </span><span class="step size-32">
      <i class="icon ion-power"></i>
    </span><span class="step size-48">
      <i class="icon ion-power"></i>
    </span><span class="step size-64">
      <i class="icon ion-power"></i>
    </span><span class="step size-96">
      <i class="icon ion-power"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-power" />

    <label>Selectable:</label>
    <span class="ion">&#xf2a9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2a9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2a9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-14">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-16">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-18">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-21">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-24">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-32">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-48">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-64">
      <i class="icon ion-pricetag"></i>
    </span><span class="step size-96">
      <i class="icon ion-pricetag"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pricetag" />

    <label>Selectable:</label>
    <span class="ion">&#xf2aa;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2aa;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2aa" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-14">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-16">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-18">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-21">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-24">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-32">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-48">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-64">
      <i class="icon ion-pricetags"></i>
    </span><span class="step size-96">
      <i class="icon ion-pricetags"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pricetags" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ab;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ab;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ab" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-printer"></i>
    </span><span class="step size-14">
      <i class="icon ion-printer"></i>
    </span><span class="step size-16">
      <i class="icon ion-printer"></i>
    </span><span class="step size-18">
      <i class="icon ion-printer"></i>
    </span><span class="step size-21">
      <i class="icon ion-printer"></i>
    </span><span class="step size-24">
      <i class="icon ion-printer"></i>
    </span><span class="step size-32">
      <i class="icon ion-printer"></i>
    </span><span class="step size-48">
      <i class="icon ion-printer"></i>
    </span><span class="step size-64">
      <i class="icon ion-printer"></i>
    </span><span class="step size-96">
      <i class="icon ion-printer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-printer" />

    <label>Selectable:</label>
    <span class="ion">&#xf21a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-14">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-16">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-18">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-21">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-24">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-32">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-48">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-64">
      <i class="icon ion-pull-request"></i>
    </span><span class="step size-96">
      <i class="icon ion-pull-request"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-pull-request" />

    <label>Selectable:</label>
    <span class="ion">&#xf345;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf345;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f345" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-14">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-16">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-18">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-21">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-24">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-32">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-48">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-64">
      <i class="icon ion-qr-scanner"></i>
    </span><span class="step size-96">
      <i class="icon ion-qr-scanner"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-qr-scanner" />

    <label>Selectable:</label>
    <span class="ion">&#xf346;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf346;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f346" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-quote"></i>
    </span><span class="step size-14">
      <i class="icon ion-quote"></i>
    </span><span class="step size-16">
      <i class="icon ion-quote"></i>
    </span><span class="step size-18">
      <i class="icon ion-quote"></i>
    </span><span class="step size-21">
      <i class="icon ion-quote"></i>
    </span><span class="step size-24">
      <i class="icon ion-quote"></i>
    </span><span class="step size-32">
      <i class="icon ion-quote"></i>
    </span><span class="step size-48">
      <i class="icon ion-quote"></i>
    </span><span class="step size-64">
      <i class="icon ion-quote"></i>
    </span><span class="step size-96">
      <i class="icon ion-quote"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-quote" />

    <label>Selectable:</label>
    <span class="ion">&#xf347;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf347;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f347" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-14">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-16">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-18">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-21">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-24">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-32">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-48">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-64">
      <i class="icon ion-radio-waves"></i>
    </span><span class="step size-96">
      <i class="icon ion-radio-waves"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-radio-waves" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ac;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ac;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ac" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-record"></i>
    </span><span class="step size-14">
      <i class="icon ion-record"></i>
    </span><span class="step size-16">
      <i class="icon ion-record"></i>
    </span><span class="step size-18">
      <i class="icon ion-record"></i>
    </span><span class="step size-21">
      <i class="icon ion-record"></i>
    </span><span class="step size-24">
      <i class="icon ion-record"></i>
    </span><span class="step size-32">
      <i class="icon ion-record"></i>
    </span><span class="step size-48">
      <i class="icon ion-record"></i>
    </span><span class="step size-64">
      <i class="icon ion-record"></i>
    </span><span class="step size-96">
      <i class="icon ion-record"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-record" />

    <label>Selectable:</label>
    <span class="ion">&#xf21b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-14">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-16">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-18">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-21">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-24">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-32">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-48">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-64">
      <i class="icon ion-refresh"></i>
    </span><span class="step size-96">
      <i class="icon ion-refresh"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-refresh" />

    <label>Selectable:</label>
    <span class="ion">&#xf21c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-reply"></i>
    </span><span class="step size-14">
      <i class="icon ion-reply"></i>
    </span><span class="step size-16">
      <i class="icon ion-reply"></i>
    </span><span class="step size-18">
      <i class="icon ion-reply"></i>
    </span><span class="step size-21">
      <i class="icon ion-reply"></i>
    </span><span class="step size-24">
      <i class="icon ion-reply"></i>
    </span><span class="step size-32">
      <i class="icon ion-reply"></i>
    </span><span class="step size-48">
      <i class="icon ion-reply"></i>
    </span><span class="step size-64">
      <i class="icon ion-reply"></i>
    </span><span class="step size-96">
      <i class="icon ion-reply"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-reply" />

    <label>Selectable:</label>
    <span class="ion">&#xf21e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-14">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-16">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-18">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-21">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-24">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-32">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-48">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-64">
      <i class="icon ion-reply-all"></i>
    </span><span class="step size-96">
      <i class="icon ion-reply-all"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-reply-all" />

    <label>Selectable:</label>
    <span class="ion">&#xf21d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-ribbon-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-ribbon-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ribbon-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf348;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf348;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f348" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-ribbon-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-ribbon-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ribbon-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf349;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf349;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f349" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-sad"></i>
    </span><span class="step size-14">
      <i class="icon ion-sad"></i>
    </span><span class="step size-16">
      <i class="icon ion-sad"></i>
    </span><span class="step size-18">
      <i class="icon ion-sad"></i>
    </span><span class="step size-21">
      <i class="icon ion-sad"></i>
    </span><span class="step size-24">
      <i class="icon ion-sad"></i>
    </span><span class="step size-32">
      <i class="icon ion-sad"></i>
    </span><span class="step size-48">
      <i class="icon ion-sad"></i>
    </span><span class="step size-64">
      <i class="icon ion-sad"></i>
    </span><span class="step size-96">
      <i class="icon ion-sad"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-sad" />

    <label>Selectable:</label>
    <span class="ion">&#xf34a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-14">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-16">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-18">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-21">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-24">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-32">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-48">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-64">
      <i class="icon ion-scissors"></i>
    </span><span class="step size-96">
      <i class="icon ion-scissors"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-scissors" />

    <label>Selectable:</label>
    <span class="ion">&#xf34b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-search"></i>
    </span><span class="step size-14">
      <i class="icon ion-search"></i>
    </span><span class="step size-16">
      <i class="icon ion-search"></i>
    </span><span class="step size-18">
      <i class="icon ion-search"></i>
    </span><span class="step size-21">
      <i class="icon ion-search"></i>
    </span><span class="step size-24">
      <i class="icon ion-search"></i>
    </span><span class="step size-32">
      <i class="icon ion-search"></i>
    </span><span class="step size-48">
      <i class="icon ion-search"></i>
    </span><span class="step size-64">
      <i class="icon ion-search"></i>
    </span><span class="step size-96">
      <i class="icon ion-search"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-search" />

    <label>Selectable:</label>
    <span class="ion">&#xf21f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf21f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f21f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-settings"></i>
    </span><span class="step size-14">
      <i class="icon ion-settings"></i>
    </span><span class="step size-16">
      <i class="icon ion-settings"></i>
    </span><span class="step size-18">
      <i class="icon ion-settings"></i>
    </span><span class="step size-21">
      <i class="icon ion-settings"></i>
    </span><span class="step size-24">
      <i class="icon ion-settings"></i>
    </span><span class="step size-32">
      <i class="icon ion-settings"></i>
    </span><span class="step size-48">
      <i class="icon ion-settings"></i>
    </span><span class="step size-64">
      <i class="icon ion-settings"></i>
    </span><span class="step size-96">
      <i class="icon ion-settings"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-settings" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ad;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ad;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ad" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-share"></i>
    </span><span class="step size-14">
      <i class="icon ion-share"></i>
    </span><span class="step size-16">
      <i class="icon ion-share"></i>
    </span><span class="step size-18">
      <i class="icon ion-share"></i>
    </span><span class="step size-21">
      <i class="icon ion-share"></i>
    </span><span class="step size-24">
      <i class="icon ion-share"></i>
    </span><span class="step size-32">
      <i class="icon ion-share"></i>
    </span><span class="step size-48">
      <i class="icon ion-share"></i>
    </span><span class="step size-64">
      <i class="icon ion-share"></i>
    </span><span class="step size-96">
      <i class="icon ion-share"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-share" />

    <label>Selectable:</label>
    <span class="ion">&#xf220;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf220;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f220" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-14">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-16">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-18">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-21">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-24">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-32">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-48">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-64">
      <i class="icon ion-shuffle"></i>
    </span><span class="step size-96">
      <i class="icon ion-shuffle"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-shuffle" />

    <label>Selectable:</label>
    <span class="ion">&#xf221;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf221;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f221" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-14">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-16">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-18">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-21">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-24">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-32">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-48">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-64">
      <i class="icon ion-skip-backward"></i>
    </span><span class="step size-96">
      <i class="icon ion-skip-backward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-skip-backward" />

    <label>Selectable:</label>
    <span class="ion">&#xf222;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf222;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f222" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-14">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-16">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-18">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-21">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-24">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-32">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-48">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-64">
      <i class="icon ion-skip-forward"></i>
    </span><span class="step size-96">
      <i class="icon ion-skip-forward"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-skip-forward" />

    <label>Selectable:</label>
    <span class="ion">&#xf223;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf223;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f223" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-android"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-android"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-android" />

    <label>Selectable:</label>
    <span class="ion">&#xf225;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf225;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f225" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-android-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-android-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-android-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf224;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf224;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f224" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-apple"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-apple"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-apple" />

    <label>Selectable:</label>
    <span class="ion">&#xf227;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf227;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f227" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-apple-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-apple-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-apple-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf226;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf226;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f226" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-bitcoin"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-bitcoin"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-bitcoin" />

    <label>Selectable:</label>
    <span class="ion">&#xf2af;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2af;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2af" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-bitcoin-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-bitcoin-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ae;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ae;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ae" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-buffer"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-buffer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-buffer" />

    <label>Selectable:</label>
    <span class="ion">&#xf229;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf229;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f229" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-buffer-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-buffer-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-buffer-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf228;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf228;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f228" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-designernews"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-designernews"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-designernews" />

    <label>Selectable:</label>
    <span class="ion">&#xf22b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-designernews-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-designernews-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-designernews-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf22a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-dribbble"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-dribbble"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-dribbble" />

    <label>Selectable:</label>
    <span class="ion">&#xf22d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-dribbble-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-dribbble-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-dribbble-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf22c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-dropbox"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-dropbox"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-dropbox" />

    <label>Selectable:</label>
    <span class="ion">&#xf22f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-dropbox-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-dropbox-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-dropbox-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf22e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf22e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f22e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-facebook"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-facebook"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-facebook" />

    <label>Selectable:</label>
    <span class="ion">&#xf231;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf231;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f231" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-facebook-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-facebook-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-facebook-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf230;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf230;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f230" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-foursquare"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-foursquare"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-foursquare" />

    <label>Selectable:</label>
    <span class="ion">&#xf34d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-foursquare-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-foursquare-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-foursquare-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf34c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-freebsd-devil"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-freebsd-devil"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-freebsd-devil" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-github"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-github"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-github" />

    <label>Selectable:</label>
    <span class="ion">&#xf233;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf233;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f233" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-github-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-github-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-github-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf232;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf232;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f232" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-google"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-google"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-google" />

    <label>Selectable:</label>
    <span class="ion">&#xf34f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-google-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-google-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-google-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf34e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf34e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f34e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-googleplus"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-googleplus"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-googleplus" />

    <label>Selectable:</label>
    <span class="ion">&#xf235;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf235;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f235" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-googleplus-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-googleplus-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-googleplus-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf234;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf234;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f234" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-hackernews"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-hackernews"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-hackernews" />

    <label>Selectable:</label>
    <span class="ion">&#xf237;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf237;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f237" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-hackernews-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-hackernews-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-hackernews-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf236;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf236;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f236" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-instagram"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-instagram"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-instagram" />

    <label>Selectable:</label>
    <span class="ion">&#xf351;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf351;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f351" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-instagram-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-instagram-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-instagram-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf350;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf350;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f350" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-linkedin"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-linkedin"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-linkedin" />

    <label>Selectable:</label>
    <span class="ion">&#xf239;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf239;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f239" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-linkedin-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-linkedin-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-linkedin-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf238;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf238;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f238" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-pinterest"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-pinterest"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-pinterest" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b1;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b1;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b1" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-pinterest-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-pinterest-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-pinterest-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b0;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b0;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b0" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-reddit"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-reddit"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-reddit" />

    <label>Selectable:</label>
    <span class="ion">&#xf23b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-reddit-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-reddit-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-reddit-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf23a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-rss"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-rss"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-rss" />

    <label>Selectable:</label>
    <span class="ion">&#xf23d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-rss-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-rss-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-rss-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf23c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-skype"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-skype"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-skype" />

    <label>Selectable:</label>
    <span class="ion">&#xf23f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-skype-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-skype-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-skype-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf23e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf23e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f23e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-tumblr"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-tumblr"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-tumblr" />

    <label>Selectable:</label>
    <span class="ion">&#xf241;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf241;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f241" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-tumblr-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-tumblr-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-tumblr-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf240;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf240;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f240" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-tux"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-tux"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-tux" />

    <label>Selectable:</label>
    <span class="ion">&#xf2c5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2c5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2c5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-twitter"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-twitter"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-twitter" />

    <label>Selectable:</label>
    <span class="ion">&#xf243;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf243;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f243" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-twitter-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-twitter-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-twitter-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf242;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf242;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f242" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-usd"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-usd"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-usd" />

    <label>Selectable:</label>
    <span class="ion">&#xf353;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf353;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f353" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-usd-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-usd-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-usd-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf352;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf352;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f352" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-vimeo"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-vimeo"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-vimeo" />

    <label>Selectable:</label>
    <span class="ion">&#xf245;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf245;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f245" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-vimeo-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-vimeo-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-vimeo-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf244;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf244;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f244" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-windows"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-windows"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-windows" />

    <label>Selectable:</label>
    <span class="ion">&#xf247;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf247;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f247" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-windows-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-windows-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-windows-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf246;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf246;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f246" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-wordpress"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-wordpress"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-wordpress" />

    <label>Selectable:</label>
    <span class="ion">&#xf249;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf249;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f249" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-wordpress-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-wordpress-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-wordpress-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf248;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf248;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f248" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-yahoo"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-yahoo"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-yahoo" />

    <label>Selectable:</label>
    <span class="ion">&#xf24b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-yahoo-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-yahoo-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-yahoo-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf24a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-youtube"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-youtube"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-youtube" />

    <label>Selectable:</label>
    <span class="ion">&#xf24d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-14">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-16">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-18">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-21">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-24">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-32">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-48">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-64">
      <i class="icon ion-social-youtube-outline"></i>
    </span><span class="step size-96">
      <i class="icon ion-social-youtube-outline"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-social-youtube-outline" />

    <label>Selectable:</label>
    <span class="ion">&#xf24c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-14">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-16">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-18">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-21">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-24">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-32">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-48">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-64">
      <i class="icon ion-speakerphone"></i>
    </span><span class="step size-96">
      <i class="icon ion-speakerphone"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-speakerphone" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b2;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b2;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b2" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-14">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-16">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-18">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-21">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-24">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-32">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-48">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-64">
      <i class="icon ion-speedometer"></i>
    </span><span class="step size-96">
      <i class="icon ion-speedometer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-speedometer" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b3;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b3;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b3" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-14">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-16">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-18">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-21">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-24">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-32">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-48">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-64">
      <i class="icon ion-spoon"></i>
    </span><span class="step size-96">
      <i class="icon ion-spoon"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-spoon" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b4;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b4;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b4" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-star"></i>
    </span><span class="step size-14">
      <i class="icon ion-star"></i>
    </span><span class="step size-16">
      <i class="icon ion-star"></i>
    </span><span class="step size-18">
      <i class="icon ion-star"></i>
    </span><span class="step size-21">
      <i class="icon ion-star"></i>
    </span><span class="step size-24">
      <i class="icon ion-star"></i>
    </span><span class="step size-32">
      <i class="icon ion-star"></i>
    </span><span class="step size-48">
      <i class="icon ion-star"></i>
    </span><span class="step size-64">
      <i class="icon ion-star"></i>
    </span><span class="step size-96">
      <i class="icon ion-star"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-star" />

    <label>Selectable:</label>
    <span class="ion">&#xf24e;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24e;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24e" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-14">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-16">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-18">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-21">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-24">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-32">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-48">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-64">
      <i class="icon ion-stats-bars"></i>
    </span><span class="step size-96">
      <i class="icon ion-stats-bars"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-stats-bars" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b5;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b5;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b5" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-steam"></i>
    </span><span class="step size-14">
      <i class="icon ion-steam"></i>
    </span><span class="step size-16">
      <i class="icon ion-steam"></i>
    </span><span class="step size-18">
      <i class="icon ion-steam"></i>
    </span><span class="step size-21">
      <i class="icon ion-steam"></i>
    </span><span class="step size-24">
      <i class="icon ion-steam"></i>
    </span><span class="step size-32">
      <i class="icon ion-steam"></i>
    </span><span class="step size-48">
      <i class="icon ion-steam"></i>
    </span><span class="step size-64">
      <i class="icon ion-steam"></i>
    </span><span class="step size-96">
      <i class="icon ion-steam"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-steam" />

    <label>Selectable:</label>
    <span class="ion">&#xf30b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-stop"></i>
    </span><span class="step size-14">
      <i class="icon ion-stop"></i>
    </span><span class="step size-16">
      <i class="icon ion-stop"></i>
    </span><span class="step size-18">
      <i class="icon ion-stop"></i>
    </span><span class="step size-21">
      <i class="icon ion-stop"></i>
    </span><span class="step size-24">
      <i class="icon ion-stop"></i>
    </span><span class="step size-32">
      <i class="icon ion-stop"></i>
    </span><span class="step size-48">
      <i class="icon ion-stop"></i>
    </span><span class="step size-64">
      <i class="icon ion-stop"></i>
    </span><span class="step size-96">
      <i class="icon ion-stop"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-stop" />

    <label>Selectable:</label>
    <span class="ion">&#xf24f;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf24f;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f24f" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-14">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-16">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-18">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-21">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-24">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-32">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-48">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-64">
      <i class="icon ion-thermometer"></i>
    </span><span class="step size-96">
      <i class="icon ion-thermometer"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-thermometer" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b6;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b6;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b6" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-14">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-16">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-18">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-21">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-24">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-32">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-48">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-64">
      <i class="icon ion-thumbsdown"></i>
    </span><span class="step size-96">
      <i class="icon ion-thumbsdown"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-thumbsdown" />

    <label>Selectable:</label>
    <span class="ion">&#xf250;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf250;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f250" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-14">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-16">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-18">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-21">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-24">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-32">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-48">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-64">
      <i class="icon ion-thumbsup"></i>
    </span><span class="step size-96">
      <i class="icon ion-thumbsup"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-thumbsup" />

    <label>Selectable:</label>
    <span class="ion">&#xf251;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf251;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f251" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-14">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-16">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-18">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-21">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-24">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-32">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-48">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-64">
      <i class="icon ion-toggle"></i>
    </span><span class="step size-96">
      <i class="icon ion-toggle"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-toggle" />

    <label>Selectable:</label>
    <span class="ion">&#xf355;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf355;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f355" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-14">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-16">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-18">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-21">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-24">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-32">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-48">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-64">
      <i class="icon ion-toggle-filled"></i>
    </span><span class="step size-96">
      <i class="icon ion-toggle-filled"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-toggle-filled" />

    <label>Selectable:</label>
    <span class="ion">&#xf354;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf354;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f354" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-14">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-16">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-18">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-21">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-24">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-32">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-48">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-64">
      <i class="icon ion-trash-a"></i>
    </span><span class="step size-96">
      <i class="icon ion-trash-a"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-trash-a" />

    <label>Selectable:</label>
    <span class="ion">&#xf252;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf252;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f252" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-14">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-16">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-18">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-21">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-24">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-32">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-48">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-64">
      <i class="icon ion-trash-b"></i>
    </span><span class="step size-96">
      <i class="icon ion-trash-b"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-trash-b" />

    <label>Selectable:</label>
    <span class="ion">&#xf253;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf253;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f253" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-14">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-16">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-18">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-21">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-24">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-32">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-48">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-64">
      <i class="icon ion-trophy"></i>
    </span><span class="step size-96">
      <i class="icon ion-trophy"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-trophy" />

    <label>Selectable:</label>
    <span class="ion">&#xf356;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf356;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f356" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-14">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-16">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-18">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-21">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-24">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-32">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-48">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-64">
      <i class="icon ion-umbrella"></i>
    </span><span class="step size-96">
      <i class="icon ion-umbrella"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-umbrella" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b7;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b7;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b7" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-university"></i>
    </span><span class="step size-14">
      <i class="icon ion-university"></i>
    </span><span class="step size-16">
      <i class="icon ion-university"></i>
    </span><span class="step size-18">
      <i class="icon ion-university"></i>
    </span><span class="step size-21">
      <i class="icon ion-university"></i>
    </span><span class="step size-24">
      <i class="icon ion-university"></i>
    </span><span class="step size-32">
      <i class="icon ion-university"></i>
    </span><span class="step size-48">
      <i class="icon ion-university"></i>
    </span><span class="step size-64">
      <i class="icon ion-university"></i>
    </span><span class="step size-96">
      <i class="icon ion-university"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-university" />

    <label>Selectable:</label>
    <span class="ion">&#xf357;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf357;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f357" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-14">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-16">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-18">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-21">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-24">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-32">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-48">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-64">
      <i class="icon ion-unlocked"></i>
    </span><span class="step size-96">
      <i class="icon ion-unlocked"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-unlocked" />

    <label>Selectable:</label>
    <span class="ion">&#xf254;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf254;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f254" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-upload"></i>
    </span><span class="step size-14">
      <i class="icon ion-upload"></i>
    </span><span class="step size-16">
      <i class="icon ion-upload"></i>
    </span><span class="step size-18">
      <i class="icon ion-upload"></i>
    </span><span class="step size-21">
      <i class="icon ion-upload"></i>
    </span><span class="step size-24">
      <i class="icon ion-upload"></i>
    </span><span class="step size-32">
      <i class="icon ion-upload"></i>
    </span><span class="step size-48">
      <i class="icon ion-upload"></i>
    </span><span class="step size-64">
      <i class="icon ion-upload"></i>
    </span><span class="step size-96">
      <i class="icon ion-upload"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-upload" />

    <label>Selectable:</label>
    <span class="ion">&#xf255;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf255;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f255" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-usb"></i>
    </span><span class="step size-14">
      <i class="icon ion-usb"></i>
    </span><span class="step size-16">
      <i class="icon ion-usb"></i>
    </span><span class="step size-18">
      <i class="icon ion-usb"></i>
    </span><span class="step size-21">
      <i class="icon ion-usb"></i>
    </span><span class="step size-24">
      <i class="icon ion-usb"></i>
    </span><span class="step size-32">
      <i class="icon ion-usb"></i>
    </span><span class="step size-48">
      <i class="icon ion-usb"></i>
    </span><span class="step size-64">
      <i class="icon ion-usb"></i>
    </span><span class="step size-96">
      <i class="icon ion-usb"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-usb" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b8;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b8;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b8" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-14">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-16">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-18">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-21">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-24">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-32">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-48">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-64">
      <i class="icon ion-videocamera"></i>
    </span><span class="step size-96">
      <i class="icon ion-videocamera"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-videocamera" />

    <label>Selectable:</label>
    <span class="ion">&#xf256;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf256;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f256" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-14">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-16">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-18">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-21">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-24">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-32">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-48">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-64">
      <i class="icon ion-volume-high"></i>
    </span><span class="step size-96">
      <i class="icon ion-volume-high"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-volume-high" />

    <label>Selectable:</label>
    <span class="ion">&#xf257;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf257;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f257" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-14">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-16">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-18">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-21">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-24">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-32">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-48">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-64">
      <i class="icon ion-volume-low"></i>
    </span><span class="step size-96">
      <i class="icon ion-volume-low"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-volume-low" />

    <label>Selectable:</label>
    <span class="ion">&#xf258;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf258;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f258" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-14">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-16">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-18">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-21">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-24">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-32">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-48">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-64">
      <i class="icon ion-volume-medium"></i>
    </span><span class="step size-96">
      <i class="icon ion-volume-medium"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-volume-medium" />

    <label>Selectable:</label>
    <span class="ion">&#xf259;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf259;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f259" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-14">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-16">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-18">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-21">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-24">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-32">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-48">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-64">
      <i class="icon ion-volume-mute"></i>
    </span><span class="step size-96">
      <i class="icon ion-volume-mute"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-volume-mute" />

    <label>Selectable:</label>
    <span class="ion">&#xf25a;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25a;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25a" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-wand"></i>
    </span><span class="step size-14">
      <i class="icon ion-wand"></i>
    </span><span class="step size-16">
      <i class="icon ion-wand"></i>
    </span><span class="step size-18">
      <i class="icon ion-wand"></i>
    </span><span class="step size-21">
      <i class="icon ion-wand"></i>
    </span><span class="step size-24">
      <i class="icon ion-wand"></i>
    </span><span class="step size-32">
      <i class="icon ion-wand"></i>
    </span><span class="step size-48">
      <i class="icon ion-wand"></i>
    </span><span class="step size-64">
      <i class="icon ion-wand"></i>
    </span><span class="step size-96">
      <i class="icon ion-wand"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-wand" />

    <label>Selectable:</label>
    <span class="ion">&#xf358;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf358;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f358" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-14">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-16">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-18">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-21">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-24">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-32">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-48">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-64">
      <i class="icon ion-waterdrop"></i>
    </span><span class="step size-96">
      <i class="icon ion-waterdrop"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-waterdrop" />

    <label>Selectable:</label>
    <span class="ion">&#xf25b;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25b;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25b" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-14">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-16">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-18">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-21">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-24">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-32">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-48">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-64">
      <i class="icon ion-wifi"></i>
    </span><span class="step size-96">
      <i class="icon ion-wifi"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-wifi" />

    <label>Selectable:</label>
    <span class="ion">&#xf25c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25c" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-14">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-16">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-18">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-21">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-24">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-32">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-48">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-64">
      <i class="icon ion-wineglass"></i>
    </span><span class="step size-96">
      <i class="icon ion-wineglass"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-wineglass" />

    <label>Selectable:</label>
    <span class="ion">&#xf2b9;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2b9;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2b9" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-woman"></i>
    </span><span class="step size-14">
      <i class="icon ion-woman"></i>
    </span><span class="step size-16">
      <i class="icon ion-woman"></i>
    </span><span class="step size-18">
      <i class="icon ion-woman"></i>
    </span><span class="step size-21">
      <i class="icon ion-woman"></i>
    </span><span class="step size-24">
      <i class="icon ion-woman"></i>
    </span><span class="step size-32">
      <i class="icon ion-woman"></i>
    </span><span class="step size-48">
      <i class="icon ion-woman"></i>
    </span><span class="step size-64">
      <i class="icon ion-woman"></i>
    </span><span class="step size-96">
      <i class="icon ion-woman"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-woman" />

    <label>Selectable:</label>
    <span class="ion">&#xf25d;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf25d;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f25d" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-14">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-16">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-18">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-21">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-24">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-32">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-48">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-64">
      <i class="icon ion-wrench"></i>
    </span><span class="step size-96">
      <i class="icon ion-wrench"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-wrench" />

    <label>Selectable:</label>
    <span class="ion">&#xf2ba;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf2ba;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f2ba" />
  </div>
</div>
<div class="icon-row">
  <div class="preview-icon"><span class="step size-12">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-14">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-16">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-18">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-21">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-24">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-32">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-48">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-64">
      <i class="icon ion-xbox"></i>
    </span><span class="step size-96">
      <i class="icon ion-xbox"></i>
    </span>
  </div>
  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
  <div class="usage">
    <label>Classname:</label>
    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-xbox" />

    <label>Selectable:</label>
    <span class="ion">&#xf30c;</span>

    <label>Escaped HTML:</label>
    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf30c;" />

    <label>CSS Content:</label>
    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f30c" />
  </div>
</div>
    </div>
    <footer>
      Made with love by the <a href="http://ionicframework.com/">Ionic Framework</a>
    </footer>
  </div>
</body>
</html>