icons.html

---
layout: default
title: Icons
subnav: UI
---

<section id="icons">

  <h2 id="UI" class="m-b-1-xs inline-block-xs">Common UI Icons</h2><span class="button button--small-xs circle relative-xs pos-t-05-xs pos-l-1-xs">WIP: Only use in docs</span>
  <p class="m-b-2-xs">Currently, Leap only comes with a few basic icons that will cover a lot of common UI pieces. For all other icons, continue using our rails helper that is built into the Treehouse app.</p>
  <table class="table-border-rows m-b-4-xs">
    <thead>
      <tr>
        <th>Icon</th>
        <th>Icon Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="table-icon">{% include icon.html icon="add" %}</td>
        <td><code>icon-add</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="add" class="rotate-45-xs" %}</td>
        <td><code>icon-add, rotate-45-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="arrow" %}</td>
        <td><code>icon-arrow</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="arrow" class="rotate-90-xs" %}</td>
        <td><code>icon-arrow, rotate-90-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="arrow" class="rotate-180-xs" %}</td>
        <td><code>icon-arrow, rotate-180-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="arrow" class="rotate-270-xs" %}</td>
        <td><code>icon-arrow, rotate-270-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="chevron" %}</td>
        <td><code>icon-chevron</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="chevron" class="rotate-90-xs" %}</td>
        <td><code>icon-chevron, rotate-90-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="chevron" class="rotate-180-xs" %}</td>
        <td><code>icon-chevron, rotate-180-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="chevron" class="rotate-270-xs" %}</td>
        <td><code>icon-chevron, rotate-270-xs</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="search" %}</td>
        <td><code>icon-search</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="maintenance" %}</td>
        <td><code>icon-maintenance</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="info" %}</td>
        <td><code>icon-info</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="gear" %}</td>
        <td><code>icon-gear</code></td>
      </tr>
      <tr>
        <td class="table-icon">{% include icon.html icon="star" %}</td>
        <td><code>icon-star</code></td>
      </tr>
    </tbody>
  </table>

</section>