<!DOCTYPE html>

<html>

<head>

  <title>Ionicons v2.0.0 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 v2.0.0 Cheatsheet, 733 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-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-add-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-add-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf359;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf359;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f359" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-alarm-clock"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-alarm-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-alarm-clock" />



    <label>Selectable:</label>

    <span class="ion">&#xf35a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-alert"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-alert" />



    <label>Selectable:</label>

    <span class="ion">&#xf35b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-apps"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-apps"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-apps" />



    <label>Selectable:</label>

    <span class="ion">&#xf35c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35c" />

  </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"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-down"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-arrow-down" />



    <label>Selectable:</label>

    <span class="ion">&#xf35d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropdown"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-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-arrow-dropdown" />



    <label>Selectable:</label>

    <span class="ion">&#xf35f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropdown-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropdown-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf35e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf35e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f35e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropleft"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropleft" />



    <label>Selectable:</label>

    <span class="ion">&#xf361;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf361;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f361" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropleft-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropleft-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf360;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf360;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f360" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropright"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropright"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropright" />



    <label>Selectable:</label>

    <span class="ion">&#xf363;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf363;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f363" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropright-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropright-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf362;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf362;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f362" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropup"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropup"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropup" />



    <label>Selectable:</label>

    <span class="ion">&#xf365;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf365;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f365" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-arrow-dropup-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-dropup-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf364;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf364;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f364" />

  </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"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-arrow-up"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-arrow-up" />



    <label>Selectable:</label>

    <span class="ion">&#xf366;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf366;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f366" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-attach"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-attach"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-attach" />



    <label>Selectable:</label>

    <span class="ion">&#xf367;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf367;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f367" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-bar"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-bar"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-bar" />



    <label>Selectable:</label>

    <span class="ion">&#xf368;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf368;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f368" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-bicycle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-bicycle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-bicycle" />



    <label>Selectable:</label>

    <span class="ion">&#xf369;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf369;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f369" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-boat"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-boat"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-boat" />



    <label>Selectable:</label>

    <span class="ion">&#xf36a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-bookmark"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-bookmark" />



    <label>Selectable:</label>

    <span class="ion">&#xf36b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-bulb"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-bulb"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-bulb" />



    <label>Selectable:</label>

    <span class="ion">&#xf36c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-bus"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-bus"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-bus" />



    <label>Selectable:</label>

    <span class="ion">&#xf36d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36d" />

  </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-cancel"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cancel"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-cancel"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-cancel" />



    <label>Selectable:</label>

    <span class="ion">&#xf36e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-car"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-car"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-car" />



    <label>Selectable:</label>

    <span class="ion">&#xf36f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf36f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f36f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cart"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-cart" />



    <label>Selectable:</label>

    <span class="ion">&#xf370;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf370;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f370" />

  </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-checkbox"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-checkbox"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-checkbox"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-checkbox" />



    <label>Selectable:</label>

    <span class="ion">&#xf374;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf374;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f374" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-checkbox-blank"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-checkbox-blank"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-checkbox-blank" />



    <label>Selectable:</label>

    <span class="ion">&#xf371;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf371;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f371" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-checkbox-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-checkbox-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-android-checkbox-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf373;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf373;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f373" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-checkbox-outline-blank"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-checkbox-outline-blank" />



    <label>Selectable:</label>

    <span class="ion">&#xf372;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf372;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f372" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-checkmark-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-checkmark-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf375;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf375;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f375" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-clipboard"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-clipboard" />



    <label>Selectable:</label>

    <span class="ion">&#xf376;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf376;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f376" />

  </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-cloud"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cloud"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-cloud" />



    <label>Selectable:</label>

    <span class="ion">&#xf37a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cloud-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-cloud-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-cloud-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf377;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf377;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f377" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cloud-done"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-cloud-done"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-cloud-done" />



    <label>Selectable:</label>

    <span class="ion">&#xf378;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf378;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f378" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-cloud-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-cloud-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf379;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf379;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f379" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-color-palette"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-color-palette"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-color-palette" />



    <label>Selectable:</label>

    <span class="ion">&#xf37b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-compass"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-compass" />



    <label>Selectable:</label>

    <span class="ion">&#xf37c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37c" />

  </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-contract"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-contract"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-contract"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-contract" />



    <label>Selectable:</label>

    <span class="ion">&#xf37d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-create"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-create"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-create" />



    <label>Selectable:</label>

    <span class="ion">&#xf37e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-delete"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-delete"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-delete" />



    <label>Selectable:</label>

    <span class="ion">&#xf37f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf37f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f37f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-desktop"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-desktop"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-desktop" />



    <label>Selectable:</label>

    <span class="ion">&#xf380;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf380;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f380" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-document"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-document" />



    <label>Selectable:</label>

    <span class="ion">&#xf381;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf381;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f381" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-done"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-done"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-done" />



    <label>Selectable:</label>

    <span class="ion">&#xf383;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf383;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f383" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-done-all"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-done-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-android-done-all" />



    <label>Selectable:</label>

    <span class="ion">&#xf382;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf382;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f382" />

  </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-drafts"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-drafts"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-drafts"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-drafts" />



    <label>Selectable:</label>

    <span class="ion">&#xf384;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf384;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f384" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-exit"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-exit"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-exit" />



    <label>Selectable:</label>

    <span class="ion">&#xf385;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf385;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f385" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-expand"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-expand" />



    <label>Selectable:</label>

    <span class="ion">&#xf386;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf386;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f386" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-favorite"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-favorite"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-favorite" />



    <label>Selectable:</label>

    <span class="ion">&#xf388;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf388;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f388" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-favorite-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-favorite-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-android-favorite-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf387;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf387;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f387" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-film"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-film" />



    <label>Selectable:</label>

    <span class="ion">&#xf389;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf389;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f389" />

  </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-folder-open"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-folder-open"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-folder-open"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-open" />



    <label>Selectable:</label>

    <span class="ion">&#xf38a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-funnel"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-funnel" />



    <label>Selectable:</label>

    <span class="ion">&#xf38b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-globe"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-globe"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-globe" />



    <label>Selectable:</label>

    <span class="ion">&#xf38c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38c" />

  </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-hangout"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-hangout"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-hangout"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-hangout" />



    <label>Selectable:</label>

    <span class="ion">&#xf38d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-happy"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-happy" />



    <label>Selectable:</label>

    <span class="ion">&#xf38e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-home"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-home" />



    <label>Selectable:</label>

    <span class="ion">&#xf38f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf38f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f38f" />

  </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-laptop"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-laptop"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-laptop" />



    <label>Selectable:</label>

    <span class="ion">&#xf390;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf390;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f390" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-list"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-list"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-list" />



    <label>Selectable:</label>

    <span class="ion">&#xf391;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf391;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f391" />

  </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-lock"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-lock"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-lock"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-lock" />



    <label>Selectable:</label>

    <span class="ion">&#xf392;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf392;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f392" />

  </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-map"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-map"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-map" />



    <label>Selectable:</label>

    <span class="ion">&#xf393;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf393;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f393" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-menu"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-menu" />



    <label>Selectable:</label>

    <span class="ion">&#xf394;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf394;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f394" />

  </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-microphone-off"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-microphone-off"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-microphone-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-android-microphone-off" />



    <label>Selectable:</label>

    <span class="ion">&#xf395;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf395;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f395" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-more-horizontal"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-more-horizontal"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-horizontal" />



    <label>Selectable:</label>

    <span class="ion">&#xf396;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf396;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f396" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-more-vertical"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-more-vertical"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-vertical" />



    <label>Selectable:</label>

    <span class="ion">&#xf397;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf397;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f397" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-navigate"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-navigate" />



    <label>Selectable:</label>

    <span class="ion">&#xf398;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf398;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f398" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-notifications"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-notifications"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-notifications" />



    <label>Selectable:</label>

    <span class="ion">&#xf39b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-notifications-none"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-notifications-none"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-notifications-none" />



    <label>Selectable:</label>

    <span class="ion">&#xf399;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf399;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f399" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-notifications-off"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-notifications-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-android-notifications-off" />



    <label>Selectable:</label>

    <span class="ion">&#xf39a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-open"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-open"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-open" />



    <label>Selectable:</label>

    <span class="ion">&#xf39c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-options"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-options"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-options" />



    <label>Selectable:</label>

    <span class="ion">&#xf39d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-people"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-people" />



    <label>Selectable:</label>

    <span class="ion">&#xf39e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-person"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-person" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-person-add"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-person-add" />



    <label>Selectable:</label>

    <span class="ion">&#xf39f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf39f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f39f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-phone-landscape"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-phone-landscape"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-phone-landscape" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-phone-portrait"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-phone-portrait"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-phone-portrait" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-pin"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-pin" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-plane"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-plane" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a4" />

  </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-print"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-print"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-print"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-print" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-radio-button-off"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-radio-button-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-android-radio-button-off" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-radio-button-on"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-radio-button-on"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-radio-button-on" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-refresh"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-refresh" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a8" />

  </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-remove-circle"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-remove-circle"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-remove-circle"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-circle" />



    <label>Selectable:</label>

    <span class="ion">&#xf3a9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3a9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3a9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-restaurant"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-restaurant"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-restaurant" />



    <label>Selectable:</label>

    <span class="ion">&#xf3aa;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3aa;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3aa" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-sad"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-sad" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ab;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ab;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ab" />

  </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-share-alt"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-share-alt"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-share-alt"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-alt" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ac;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ac;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ac" />

  </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-star-half"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-star-half"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-star-half" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ad;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ad;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ad" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-star-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-star-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ae;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ae;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ae" />

  </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-subway"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-subway"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-subway"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-subway" />



    <label>Selectable:</label>

    <span class="ion">&#xf3af;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3af;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3af" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-sunny"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-sunny" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-sync"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-sync"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-sync" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-textsms"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-textsms"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-textsms" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-time"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-time" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-train"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-train"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-train" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-unlock"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-unlock"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-unlock" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-upload"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-upload" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-volume-down"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-volume-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-android-volume-down" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-volume-mute"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-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-android-volume-mute" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-volume-off"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-volume-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-android-volume-off" />



    <label>Selectable:</label>

    <span class="ion">&#xf3b9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3b9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3b9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-volume-up"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-volume-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-android-volume-up" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ba;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ba;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ba" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-walk"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-walk"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-walk" />



    <label>Selectable:</label>

    <span class="ion">&#xf3bb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3bb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3bb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-warning"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-warning"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-warning" />



    <label>Selectable:</label>

    <span class="ion">&#xf3bc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3bc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3bc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-14">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-16">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-18">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-21">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-24">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-32">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-48">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-64">

      <i class="icon ion-android-watch"></i>

    </span><span class="step size-96">

      <i class="icon ion-android-watch"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-watch" />



    <label>Selectable:</label>

    <span class="ion">&#xf3bd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3bd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3bd" />

  </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-backspace"></i>

    </span><span class="step size-14">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-16">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-18">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-21">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-24">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-32">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-48">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-64">

      <i class="icon ion-backspace"></i>

    </span><span class="step size-96">

      <i class="icon ion-backspace"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-backspace" />



    <label>Selectable:</label>

    <span class="ion">&#xf3bf;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3bf;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3bf" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-backspace-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-backspace-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-backspace-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3be;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3be;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3be" />

  </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-bowtie"></i>

    </span><span class="step size-14">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-16">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-18">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-21">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-24">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-32">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-48">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-64">

      <i class="icon ion-bowtie"></i>

    </span><span class="step size-96">

      <i class="icon ion-bowtie"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-bowtie" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c0" />

  </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-crop"></i>

    </span><span class="step size-14">

      <i class="icon ion-crop"></i>

    </span><span class="step size-16">

      <i class="icon ion-crop"></i>

    </span><span class="step size-18">

      <i class="icon ion-crop"></i>

    </span><span class="step size-21">

      <i class="icon ion-crop"></i>

    </span><span class="step size-24">

      <i class="icon ion-crop"></i>

    </span><span class="step size-32">

      <i class="icon ion-crop"></i>

    </span><span class="step size-48">

      <i class="icon ion-crop"></i>

    </span><span class="step size-64">

      <i class="icon ion-crop"></i>

    </span><span class="step size-96">

      <i class="icon ion-crop"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-crop" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c1" />

  </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-easel"></i>

    </span><span class="step size-14">

      <i class="icon ion-easel"></i>

    </span><span class="step size-16">

      <i class="icon ion-easel"></i>

    </span><span class="step size-18">

      <i class="icon ion-easel"></i>

    </span><span class="step size-21">

      <i class="icon ion-easel"></i>

    </span><span class="step size-24">

      <i class="icon ion-easel"></i>

    </span><span class="step size-32">

      <i class="icon ion-easel"></i>

    </span><span class="step size-48">

      <i class="icon ion-easel"></i>

    </span><span class="step size-64">

      <i class="icon ion-easel"></i>

    </span><span class="step size-96">

      <i class="icon ion-easel"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-easel" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c2" />

  </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-email-unread"></i>

    </span><span class="step size-14">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-16">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-18">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-21">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-24">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-32">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-48">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-64">

      <i class="icon ion-email-unread"></i>

    </span><span class="step size-96">

      <i class="icon ion-email-unread"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-unread" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-14">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-16">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-18">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-21">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-24">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-32">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-48">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-64">

      <i class="icon ion-erlenmeyer-flask"></i>

    </span><span class="step size-96">

      <i class="icon ion-erlenmeyer-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-erlenmeyer-flask" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-14">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-16">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-18">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-21">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-24">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-32">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-48">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-64">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span><span class="step size-96">

      <i class="icon ion-erlenmeyer-flask-bubbles"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-erlenmeyer-flask-bubbles" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c4" />

  </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-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-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-happy-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-happy-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-happy-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-happy-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c6" />

  </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-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-ios-alarm"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-alarm"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-alarm" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-alarm-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-alarm-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-albums"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-albums" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ca;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ca;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ca" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-albums-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-albums-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3c9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3c9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3c9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-americanfootball"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-americanfootball" />



    <label>Selectable:</label>

    <span class="ion">&#xf3cc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3cc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3cc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-americanfootball-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-americanfootball-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3cb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3cb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3cb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-analytics"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-analytics" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ce;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ce;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ce" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-analytics-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-analytics-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3cd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3cd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3cd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-back"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-back" />



    <label>Selectable:</label>

    <span class="ion">&#xf3cf;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3cf;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3cf" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-down"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-down" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-forward"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-forward" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-left"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-left" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-right"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-right" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-thin-down"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-thin-down" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-thin-left"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-thin-left" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-thin-right"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-thin-right" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-thin-up"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-thin-up" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-arrow-up"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-arrow-up" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-at"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-at" />



    <label>Selectable:</label>

    <span class="ion">&#xf3da;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3da;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3da" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-at-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-at-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3d9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3d9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3d9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-barcode"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-barcode" />



    <label>Selectable:</label>

    <span class="ion">&#xf3dc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3dc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3dc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-barcode-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-barcode-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3db;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3db;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3db" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-baseball"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-baseball" />



    <label>Selectable:</label>

    <span class="ion">&#xf3de;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3de;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3de" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-baseball-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-baseball-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3dd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3dd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3dd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-basketball"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-basketball" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-basketball-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-basketball-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3df;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3df;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3df" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bell"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bell" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bell-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bell-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-body"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-body"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-body" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-body-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-body-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-ios-body-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bolt"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bolt" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bolt-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bolt-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-book"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-book" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-book-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-book-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-ios-book-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bookmarks"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bookmarks" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ea;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ea;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ea" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-bookmarks-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-bookmarks-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3e9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3e9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3e9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-box"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-box" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ec;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ec;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ec" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-box-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-box-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3eb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3eb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3eb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-briefcase"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-briefcase" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ee;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ee;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ee" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-briefcase-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-briefcase-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ed;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ed;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ed" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-browsers"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-browsers" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-browsers-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-browsers-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ef;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ef;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ef" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-calculator"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-calculator" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-calculator-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-calculator-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-calendar"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-calendar" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-calendar-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-calendar-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-camera"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-camera" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-camera-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-camera-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cart"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cart" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cart-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cart-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-chatboxes"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-chatboxes" />



    <label>Selectable:</label>

    <span class="ion">&#xf3fa;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3fa;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3fa" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-chatboxes-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-chatboxes-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3f9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3f9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3f9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-chatbubble"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-chatbubble" />



    <label>Selectable:</label>

    <span class="ion">&#xf3fc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3fc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3fc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-chatbubble-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-chatbubble-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3fb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3fb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3fb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-checkmark"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-checkmark" />



    <label>Selectable:</label>

    <span class="ion">&#xf3ff;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3ff;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3ff" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-checkmark-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-checkmark-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf3fd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3fd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3fd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-checkmark-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-checkmark-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf3fe;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf3fe;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f3fe" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-circle-filled"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-circle-filled" />



    <label>Selectable:</label>

    <span class="ion">&#xf400;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf400;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f400" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-circle-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-circle-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf401;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf401;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f401" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-clock"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-clock" />



    <label>Selectable:</label>

    <span class="ion">&#xf403;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf403;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f403" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-clock-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-clock-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf402;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf402;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f402" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-close"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-close" />



    <label>Selectable:</label>

    <span class="ion">&#xf406;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf406;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f406" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-close-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-close-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf404;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf404;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f404" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-close-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-close-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf405;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf405;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f405" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud" />



    <label>Selectable:</label>

    <span class="ion">&#xf40c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud-download"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud-download" />



    <label>Selectable:</label>

    <span class="ion">&#xf408;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf408;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f408" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud-download-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud-download-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf407;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf407;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f407" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf409;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf409;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f409" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud-upload"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud-upload" />



    <label>Selectable:</label>

    <span class="ion">&#xf40b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloud-upload-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloud-upload-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf40a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloudy"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloudy" />



    <label>Selectable:</label>

    <span class="ion">&#xf410;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf410;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f410" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloudy-night"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloudy-night" />



    <label>Selectable:</label>

    <span class="ion">&#xf40e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloudy-night-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloudy-night-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf40d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cloudy-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cloudy-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf40f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf40f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f40f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cog"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cog" />



    <label>Selectable:</label>

    <span class="ion">&#xf412;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf412;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f412" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-cog-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-cog-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf411;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf411;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f411" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-color-filter"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-color-filter"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-color-filter" />



    <label>Selectable:</label>

    <span class="ion">&#xf414;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf414;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f414" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-color-filter-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-color-filter-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-ios-color-filter-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf413;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf413;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f413" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-color-wand"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-color-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-ios-color-wand" />



    <label>Selectable:</label>

    <span class="ion">&#xf416;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf416;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f416" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-color-wand-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-color-wand-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-ios-color-wand-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf415;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf415;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f415" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-compose"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-compose" />



    <label>Selectable:</label>

    <span class="ion">&#xf418;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf418;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f418" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-compose-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-compose-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf417;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf417;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f417" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-contact"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-contact" />



    <label>Selectable:</label>

    <span class="ion">&#xf41a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-contact-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-contact-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf419;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf419;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f419" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-copy"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-copy" />



    <label>Selectable:</label>

    <span class="ion">&#xf41c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-copy-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-copy-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf41b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-crop"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-crop"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-crop" />



    <label>Selectable:</label>

    <span class="ion">&#xf41e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-crop-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-crop-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-ios-crop-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf41d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-download"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-download" />



    <label>Selectable:</label>

    <span class="ion">&#xf420;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf420;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f420" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-download-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-download-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf41f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf41f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f41f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-drag"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-drag" />



    <label>Selectable:</label>

    <span class="ion">&#xf421;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf421;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f421" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-email"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-email" />



    <label>Selectable:</label>

    <span class="ion">&#xf423;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf423;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f423" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-email-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-email-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf422;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf422;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f422" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-eye"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-eye" />



    <label>Selectable:</label>

    <span class="ion">&#xf425;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf425;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f425" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-eye-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-eye-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf424;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf424;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f424" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-fastforward"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-fastforward" />



    <label>Selectable:</label>

    <span class="ion">&#xf427;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf427;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f427" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-fastforward-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-fastforward-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf426;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf426;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f426" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-filing"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-filing" />



    <label>Selectable:</label>

    <span class="ion">&#xf429;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf429;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f429" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-filing-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-filing-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf428;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf428;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f428" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-film"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-film" />



    <label>Selectable:</label>

    <span class="ion">&#xf42b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-film-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-film-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf42a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flag"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-flag" />



    <label>Selectable:</label>

    <span class="ion">&#xf42d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flag-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-flag-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf42c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flame"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-flame" />



    <label>Selectable:</label>

    <span class="ion">&#xf42f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flame-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-flame-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-ios-flame-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf42e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf42e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f42e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flask"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-flask" />



    <label>Selectable:</label>

    <span class="ion">&#xf431;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf431;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f431" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flask-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-flask-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-ios-flask-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf430;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf430;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f430" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flower"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-flower"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-flower" />



    <label>Selectable:</label>

    <span class="ion">&#xf433;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf433;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f433" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-flower-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-flower-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-ios-flower-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf432;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf432;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f432" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-folder"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-folder" />



    <label>Selectable:</label>

    <span class="ion">&#xf435;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf435;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f435" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-folder-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-folder-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf434;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf434;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f434" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-football"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-football" />



    <label>Selectable:</label>

    <span class="ion">&#xf437;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf437;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f437" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-football-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-football-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf436;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf436;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f436" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-game-controller-a"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-game-controller-a" />



    <label>Selectable:</label>

    <span class="ion">&#xf439;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf439;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f439" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-game-controller-a-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-game-controller-a-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-ios-game-controller-a-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf438;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf438;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f438" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-game-controller-b"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-game-controller-b" />



    <label>Selectable:</label>

    <span class="ion">&#xf43b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-game-controller-b-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-game-controller-b-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-ios-game-controller-b-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf43a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-gear"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-gear" />



    <label>Selectable:</label>

    <span class="ion">&#xf43d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-gear-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-gear-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf43c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-glasses"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-glasses" />



    <label>Selectable:</label>

    <span class="ion">&#xf43f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-glasses-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-glasses-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf43e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf43e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f43e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-grid-view"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-grid-view"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-grid-view" />



    <label>Selectable:</label>

    <span class="ion">&#xf441;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf441;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f441" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-grid-view-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-grid-view-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-ios-grid-view-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf440;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf440;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f440" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-heart"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-heart" />



    <label>Selectable:</label>

    <span class="ion">&#xf443;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf443;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f443" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-heart-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-heart-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf442;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf442;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f442" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-help"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-help" />



    <label>Selectable:</label>

    <span class="ion">&#xf446;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf446;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f446" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-help-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-help-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf444;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf444;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f444" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-help-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-help-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf445;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf445;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f445" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-home"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-home" />



    <label>Selectable:</label>

    <span class="ion">&#xf448;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf448;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f448" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-home-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-home-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf447;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf447;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f447" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-infinite"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-infinite" />



    <label>Selectable:</label>

    <span class="ion">&#xf44a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-infinite-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-infinite-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf449;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf449;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f449" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-information"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-information" />



    <label>Selectable:</label>

    <span class="ion">&#xf44d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-information-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-information-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf44b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-information-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-information-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf44c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-ionic-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-ionic-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf44e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-keypad"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-keypad" />



    <label>Selectable:</label>

    <span class="ion">&#xf450;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf450;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f450" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-keypad-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-keypad-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf44f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf44f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f44f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-lightbulb"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-lightbulb" />



    <label>Selectable:</label>

    <span class="ion">&#xf452;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf452;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f452" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-lightbulb-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-lightbulb-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf451;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf451;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f451" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-list"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-list"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-list" />



    <label>Selectable:</label>

    <span class="ion">&#xf454;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf454;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f454" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-list-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-list-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-ios-list-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf453;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf453;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f453" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-location"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-location" />



    <label>Selectable:</label>

    <span class="ion">&#xf456;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf456;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f456" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-location-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-location-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf455;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf455;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f455" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-locked"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-locked" />



    <label>Selectable:</label>

    <span class="ion">&#xf458;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf458;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f458" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-locked-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-locked-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf457;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf457;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f457" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-loop"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-loop" />



    <label>Selectable:</label>

    <span class="ion">&#xf45a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-loop-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-loop-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf459;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf459;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f459" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-medical"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-medical"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-medical" />



    <label>Selectable:</label>

    <span class="ion">&#xf45c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-medical-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-medical-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-ios-medical-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf45b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-medkit"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-medkit" />



    <label>Selectable:</label>

    <span class="ion">&#xf45e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-medkit-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-medkit-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf45d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-mic"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-mic" />



    <label>Selectable:</label>

    <span class="ion">&#xf461;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf461;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f461" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-mic-off"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-mic-off" />



    <label>Selectable:</label>

    <span class="ion">&#xf45f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf45f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f45f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-mic-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-mic-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf460;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf460;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f460" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-minus"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-minus" />



    <label>Selectable:</label>

    <span class="ion">&#xf464;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf464;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f464" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-minus-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-minus-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf462;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf462;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f462" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-minus-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-minus-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf463;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf463;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f463" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-monitor"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-monitor" />



    <label>Selectable:</label>

    <span class="ion">&#xf466;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf466;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f466" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-monitor-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-monitor-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf465;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf465;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f465" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-moon"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-moon" />



    <label>Selectable:</label>

    <span class="ion">&#xf468;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf468;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f468" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-moon-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-moon-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf467;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf467;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f467" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-more"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-more" />



    <label>Selectable:</label>

    <span class="ion">&#xf46a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-more-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-more-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf469;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf469;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f469" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-musical-note"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-musical-note" />



    <label>Selectable:</label>

    <span class="ion">&#xf46b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-musical-notes"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-musical-notes" />



    <label>Selectable:</label>

    <span class="ion">&#xf46c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-navigate"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-navigate" />



    <label>Selectable:</label>

    <span class="ion">&#xf46e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-navigate-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-navigate-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf46d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-nutrition"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-nutrition"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-nutrition" />



    <label>Selectable:</label>

    <span class="ion">&#xf470;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf470;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f470" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-nutrition-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-nutrition-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-ios-nutrition-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf46f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf46f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f46f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paper"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paper" />



    <label>Selectable:</label>

    <span class="ion">&#xf472;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf472;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f472" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paper-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paper-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf471;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf471;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f471" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paperplane"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paperplane" />



    <label>Selectable:</label>

    <span class="ion">&#xf474;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf474;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f474" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paperplane-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paperplane-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf473;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf473;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f473" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-partlysunny"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-partlysunny" />



    <label>Selectable:</label>

    <span class="ion">&#xf476;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf476;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f476" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-partlysunny-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-partlysunny-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf475;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf475;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f475" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pause"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pause" />



    <label>Selectable:</label>

    <span class="ion">&#xf478;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf478;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f478" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pause-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pause-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf477;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf477;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f477" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paw"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paw" />



    <label>Selectable:</label>

    <span class="ion">&#xf47a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-paw-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-paw-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf479;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf479;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f479" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-people"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-people" />



    <label>Selectable:</label>

    <span class="ion">&#xf47c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-people-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-people-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf47b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-person"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-person" />



    <label>Selectable:</label>

    <span class="ion">&#xf47e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-person-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-person-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf47d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-personadd"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-personadd" />



    <label>Selectable:</label>

    <span class="ion">&#xf480;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf480;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f480" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-personadd-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-personadd-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf47f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf47f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f47f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-photos"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-photos" />



    <label>Selectable:</label>

    <span class="ion">&#xf482;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf482;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f482" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-photos-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-photos-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf481;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf481;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f481" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pie"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pie" />



    <label>Selectable:</label>

    <span class="ion">&#xf484;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf484;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f484" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pie-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pie-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf483;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf483;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f483" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pint"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-pint"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-pint" />



    <label>Selectable:</label>

    <span class="ion">&#xf486;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf486;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f486" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pint-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-pint-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-ios-pint-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf485;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf485;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f485" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-play"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-play" />



    <label>Selectable:</label>

    <span class="ion">&#xf488;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf488;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f488" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-play-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-play-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf487;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf487;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f487" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-plus"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-plus" />



    <label>Selectable:</label>

    <span class="ion">&#xf48b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-plus-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-plus-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf489;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf489;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f489" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-plus-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-plus-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf48a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pricetag"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pricetag" />



    <label>Selectable:</label>

    <span class="ion">&#xf48d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pricetag-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pricetag-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf48c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pricetags"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pricetags" />



    <label>Selectable:</label>

    <span class="ion">&#xf48f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pricetags-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pricetags-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf48e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf48e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f48e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-printer"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-printer" />



    <label>Selectable:</label>

    <span class="ion">&#xf491;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf491;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f491" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-printer-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-printer-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf490;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf490;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f490" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pulse"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pulse" />



    <label>Selectable:</label>

    <span class="ion">&#xf493;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf493;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f493" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-pulse-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-pulse-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf492;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf492;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f492" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rainy"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-rainy" />



    <label>Selectable:</label>

    <span class="ion">&#xf495;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf495;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f495" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rainy-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-rainy-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf494;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf494;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f494" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-recording"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-recording" />



    <label>Selectable:</label>

    <span class="ion">&#xf497;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf497;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f497" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-recording-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-recording-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf496;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf496;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f496" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-redo"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-redo" />



    <label>Selectable:</label>

    <span class="ion">&#xf499;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf499;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f499" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-redo-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-redo-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf498;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf498;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f498" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-refresh"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-refresh" />



    <label>Selectable:</label>

    <span class="ion">&#xf49c;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49c;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49c" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-refresh-empty"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-refresh-empty" />



    <label>Selectable:</label>

    <span class="ion">&#xf49a;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49a;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49a" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-refresh-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-refresh-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf49b;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49b;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49b" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-reload"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-reload" />



    <label>Selectable:</label>

    <span class="ion">&#xf49d;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49d;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49d" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-reverse-camera"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-reverse-camera" />



    <label>Selectable:</label>

    <span class="ion">&#xf49f;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49f;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49f" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-reverse-camera-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-reverse-camera-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf49e;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf49e;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f49e" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rewind"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-rewind" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rewind-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-rewind-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rose"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-rose"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-ios-rose" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-rose-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-rose-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-ios-rose-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-search"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-search" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-search-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-search-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-settings"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-settings" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-settings-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-settings-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-shuffle"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-shuffle" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-shuffle-strong"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-shuffle-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-ios-shuffle-strong" />



    <label>Selectable:</label>

    <span class="ion">&#xf4a8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4a8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4a8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-skipbackward"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-skipbackward" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ab;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ab;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ab" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-skipbackward-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-skipbackward-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4aa;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4aa;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4aa" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-skipforward"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-skipforward" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ad;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ad;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ad" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-skipforward-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-skipforward-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ac;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ac;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ac" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-snowy"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-snowy" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ae;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ae;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ae" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-speedometer"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-speedometer" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-speedometer-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-speedometer-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4af;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4af;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4af" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-star"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-star" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-star-half"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-star-half" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-star-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-star-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-stopwatch"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-stopwatch" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-stopwatch-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-stopwatch-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-sunny"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-sunny" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-sunny-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-sunny-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-telephone"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-telephone" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-telephone-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-telephone-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4b8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4b8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4b8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-tennisball"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-tennisball" />



    <label>Selectable:</label>

    <span class="ion">&#xf4bb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4bb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4bb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-tennisball-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-tennisball-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ba;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ba;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ba" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-thunderstorm"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-thunderstorm" />



    <label>Selectable:</label>

    <span class="ion">&#xf4bd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4bd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4bd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-thunderstorm-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-thunderstorm-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4bc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4bc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4bc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-time"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-time" />



    <label>Selectable:</label>

    <span class="ion">&#xf4bf;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4bf;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4bf" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-time-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-time-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4be;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4be;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4be" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-timer"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-timer" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-timer-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-timer-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-toggle"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-toggle" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-toggle-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-toggle-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-trash"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-trash" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-trash-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-trash-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-undo"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-undo" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-undo-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-undo-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-unlocked"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-unlocked" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-unlocked-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-unlocked-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4c8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4c8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4c8" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-upload"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-upload" />



    <label>Selectable:</label>

    <span class="ion">&#xf4cb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4cb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4cb" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-upload-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-upload-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ca;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ca;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ca" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-videocam"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-videocam" />



    <label>Selectable:</label>

    <span class="ion">&#xf4cd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4cd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4cd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-videocam-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-videocam-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4cc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4cc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4cc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-volume-high"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-volume-high" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ce;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ce;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ce" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-volume-low"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-volume-low" />



    <label>Selectable:</label>

    <span class="ion">&#xf4cf;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4cf;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4cf" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-wineglass"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-wineglass" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-wineglass-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-wineglass-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-world"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-world" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-ios-world-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-ios-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-ios-world-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d2" />

  </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-lock-combination"></i>

    </span><span class="step size-14">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-16">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-18">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-21">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-24">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-32">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-48">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-64">

      <i class="icon ion-lock-combination"></i>

    </span><span class="step size-96">

      <i class="icon ion-lock-combination"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-lock-combination" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d4" />

  </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-paintbrush"></i>

    </span><span class="step size-14">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-16">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-18">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-21">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-24">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-32">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-48">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-64">

      <i class="icon ion-paintbrush"></i>

    </span><span class="step size-96">

      <i class="icon ion-paintbrush"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-paintbrush" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-14">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-16">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-18">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-21">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-24">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-32">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-48">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-64">

      <i class="icon ion-paintbucket"></i>

    </span><span class="step size-96">

      <i class="icon ion-paintbucket"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-paintbucket" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d6" />

  </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-sad-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-sad-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-sad-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-sad-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d7" />

  </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-angular"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-angular"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-angular"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-angular" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d9" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-angular-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-angular-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-angular-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4d8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4d8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4d8" />

  </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-chrome"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-chrome"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-chrome"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-chrome" />



    <label>Selectable:</label>

    <span class="ion">&#xf4db;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4db;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4db" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-chrome-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-chrome-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-chrome-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4da;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4da;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4da" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-codepen"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-codepen"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-codepen" />



    <label>Selectable:</label>

    <span class="ion">&#xf4dd;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4dd;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4dd" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-codepen-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-codepen-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-codepen-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4dc;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4dc;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4dc" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-css3"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-css3"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-css3" />



    <label>Selectable:</label>

    <span class="ion">&#xf4df;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4df;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4df" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-css3-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-css3-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-css3-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4de;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4de;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4de" />

  </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-euro"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-euro"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-euro"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-euro" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e1" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-euro-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-euro-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-euro-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e0" />

  </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-html5"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-html5"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-html5"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-html5" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e3" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-html5-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-html5-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-html5-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e2" />

  </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-javascript"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-javascript"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-javascript"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-javascript" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e5" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-javascript-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-javascript-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-javascript-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e4" />

  </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-markdown"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-markdown"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-markdown"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-markdown" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e6" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-nodejs"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-nodejs"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-nodejs" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-octocat"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-octocat"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-octocat" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e8;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e8;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e8" />

  </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-python"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-python"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-python"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-python" />



    <label>Selectable:</label>

    <span class="ion">&#xf4e9;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4e9;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4e9" />

  </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-sass"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-sass"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-sass"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-sass" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ea;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ea;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ea" />

  </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-snapchat"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-snapchat"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-snapchat"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-snapchat" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ec;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ec;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ec" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-snapchat-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-snapchat-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-snapchat-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4eb;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4eb;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4eb" />

  </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-twitch"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-twitch"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-twitch"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-twitch" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ee;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ee;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ee" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-twitch-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-twitch-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-twitch-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ed;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ed;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ed" />

  </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-whatsapp"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-whatsapp"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-whatsapp"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-whatsapp" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f0;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f0;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f0" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-whatsapp-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-whatsapp-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-whatsapp-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4ef;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4ef;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4ef" />

  </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-yen"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-yen"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-yen"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><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-yen" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f2;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f2;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f2" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-social-yen-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-social-yen-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-yen-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f1;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f1;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f1" />

  </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-soup-can"></i>

    </span><span class="step size-14">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-16">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-18">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-21">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-24">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-32">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-48">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-64">

      <i class="icon ion-soup-can"></i>

    </span><span class="step size-96">

      <i class="icon ion-soup-can"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-soup-can" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f4;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f4;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f4" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-soup-can-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-soup-can-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-soup-can-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f3;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f3;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f3" />

  </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-transgender"></i>

    </span><span class="step size-14">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-16">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-18">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-21">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-24">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-32">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-48">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-64">

      <i class="icon ion-transgender"></i>

    </span><span class="step size-96">

      <i class="icon ion-transgender"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-transgender" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f5;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f5;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f5" />

  </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-tshirt"></i>

    </span><span class="step size-14">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-16">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-18">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-21">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-24">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-32">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-48">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-64">

      <i class="icon ion-tshirt"></i>

    </span><span class="step size-96">

      <i class="icon ion-tshirt"></i>

    </span>

  </div>

  <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>

  <div class="usage">

    <label>Classname:</label>

    <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-tshirt" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f7;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f7;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f7" />

  </div>

</div>

<div class="icon-row">

  <div class="preview-icon"><span class="step size-12">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-14">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-16">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-18">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-21">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-24">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-32">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-48">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-64">

      <i class="icon ion-tshirt-outline"></i>

    </span><span class="step size-96">

      <i class="icon ion-tshirt-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-tshirt-outline" />



    <label>Selectable:</label>

    <span class="ion">&#xf4f6;</span>



    <label>Escaped HTML:</label>

    <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf4f6;" />



    <label>CSS Content:</label>

    <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f4f6" />

  </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>