• Visual Language
  • Graphical elements

Icons

  • class="icon-info-circled"
  • class="icon-record"
  • class="icon-facebook"
  • class="icon-twitter"
  • class="icon-phone"
  • class="icon-mail"
  • class="icon-gplus"
  • class="icon-search"
  • class="icon-download"
  • class="icon-print"
  • class="icon-book"
  • class="icon-down-open-big"
  • class="icon-up-open-big"
  • class="icon-left-open-big"
  • class="icon-right-open-big"
  • class="icon-down-open-mini"
  • class="icon-cog"
  • class="icon-check"
  • class="icon-search-1"
  • class="icon-popup"
  • class="icon-up-bold"
  • class="icon-down-bold"
  • class="icon-users"
  • class="icon-chart"
  • class="icon-table"
  • class="icon-menu"
  • class="icon-cancel"
  • class="icon-comment"
 
<ul class="icon__list">
  <li class="icon__item">
    <span class="icon icon-info-circled tooltip" title="hi hello this is a test how are you doing" role="presentation"></span>
    <code>class=&quot;icon-info-circled&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-record" role="presentation"></span>
    <code>class=&quot;icon-record&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-facebook" role="presentation"></span>
    <code>class=&quot;icon-facebook&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-twitter" role="presentation"></span>
    <code>class=&quot;icon-twitter&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-phone" role="presentation"></span>
    <code>class=&quot;icon-phone&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-mail" role="presentation"></span>
    <code>class=&quot;icon-mail&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-gplus" role="presentation"></span>
    <code>class=&quot;icon-gplus&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-search" role="presentation"></span>
    <code>class=&quot;icon-search&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-download" role="presentation"></span>
    <code>class=&quot;icon-download&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-print" role="presentation"></span>
    <code>class=&quot;icon-print&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-book" role="presentation"></span>
    <code>class=&quot;icon-book&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-down-open-big" role="presentation"></span>
    <code>class=&quot;icon-down-open-big&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-up-open-big" role="presentation"></span>
    <code>class=&quot;icon-up-open-big&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-left-open-big" role="presentation"></span>
    <code>class=&quot;icon-left-open-big&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-right-open-big" role="presentation"></span>
    <code>class=&quot;icon-right-open-big&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-down-open-mini" role="presentation"></span>
    <code>class=&quot;icon-down-open-mini&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-cog" role="presentation"></span>
    <code>class=&quot;icon-cog&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-check" role="presentation"></span>
    <code>class=&quot;icon-check&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-search-1" role="presentation"></span>
    <code>class=&quot;icon-search-1&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-popup" role="presentation"></span>
    <code>class=&quot;icon-popup&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-up-bold" role="presentation"></span>
    <code>class=&quot;icon-up-bold&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-down-bold" role="presentation"></span>
    <code>class=&quot;icon-down-bold&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-users" role="presentation"></span>
    <code>class=&quot;icon-users&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-chart" role="presentation"></span>
    <code>class=&quot;icon-chart&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-table" role="presentation"></span>
    <code>class=&quot;icon-table&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-menu" role="presentation"></span>
    <code>class=&quot;icon-menu&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-cancel" role="presentation"></span>
    <code>class=&quot;icon-cancel&quot;</code>
  </li>

  <li class="icon__item">
    <span class="icon icon-comment" role="presentation"></span>
    <code>class=&quot;icon-comment&quot;</code>
  </li>
</ul>

Developer Notes

Fontello is used to generate the fonts required for the library. Included in the code base is the configuration file required by the service to make changes to the font files. Only the icons required should be included so that file size is kept to a minimum.

role="presentation" should be placed on the icon element to ensure that the browser understands that it has no functional relevance.

Icon classes should only be used on elements that contain no text or child elements.