---
categories: [Widgets]
layout: page
title: Icons
resource: true
---
      <div class="row">
        <div class="col-sm-6 col-md-6">
          <h2>PatternFly Icons</h2>
          <p>Custom icons and selections from <a href="http://icomoon.io/#icons">IcoMoon - Free</a>.</p>
          <ul class="icons list-unstyled">
            <li>
              <span class="pficon pficon-add-circle-o"></span>
              <span class="icon-class">pficon-add-circle-o</span>
            </li>
            <li>
              <span class="pficon pficon-close"></span>
              <span class="icon-class">pficon-close</span>
            </li>
            <li>
              <span class="pficon pficon-cluster"></span>
              <span class="icon-class">pficon-cluster</span>
            </li>
            <li>
              <span class="pficon pficon-container-node"></span>
              <span class="icon-class">pficon-container-node</span>
            </li>
            <li>
              <span class="pficon pficon-delete"></span>
              <span class="icon-class">pficon-delete</span>
            </li>
            <li>
              <span class="pficon pficon-edit"></span>
              <span class="icon-class">pficon-edit</span>
            </li>
            <li>
              <span class="pficon pficon-error-circle-o"></span>
              <span class="icon-class">pficon-error-circle-o</span>
            </li>
            <li>
              <span class="pficon pficon-export"></span>
              <span class="icon-class">pficon-export</span>
            </li>
            <li>
              <span class="pficon pficon-flag"></span>
              <span class="icon-class">pficon-flag</span>
            </li>
            <li>
              <span class="pficon pficon-folder-close"></span>
              <span class="icon-class">pficon-folder-close</span>
            </li>
            <li>
              <span class="pficon pficon-folder-open"></span>
              <span class="icon-class">pficon-folder-open</span>
            </li>
            <li>
              <span class="pficon pficon-help"></span>
              <span class="icon-class">pficon-help</span>
            </li>
            <li>
              <span class="pficon pficon-home"></span>
              <span class="icon-class">pficon-home</span>
            </li>
            <li>
              <span class="pficon pficon-history"></span>
              <span class="icon-class">pficon-history</span>
            </li>
            <li>
              <span class="pficon pficon-image"></span>
              <span class="icon-class">pficon-image</span>
            </li>
            <li>
              <span class="pficon pficon-import"></span>
              <span class="icon-class">pficon-import</span>
            </li>
            <li>
              <span class="pficon pficon-info"></span>
              <span class="icon-class">pficon-info</span>
            </li>
            <li>
              <span class="pficon pficon-ok"></span>
              <span class="icon-class">pficon-ok</span>
            </li>
            <li>
              <span class="pficon pficon-print"></span>
              <span class="icon-class">pficon-print</span>
            </li>
            <li>
              <span class="pficon pficon-restart"></span>
              <span class="icon-class">pficon-restart</span>
            </li>
            <li>
              <span class="pficon pficon-running"></span>
              <span class="icon-class">pficon-running</span>
            </li>
            <li>
              <span class="pficon pficon-save"></span>
              <span class="icon-class">pficon-save</span>
            </li>
            <li>
              <span class="pficon pficon-screen"></span>
              <span class="icon-class">pficon-screen</span>
            </li>
            <li>
              <span class="pficon pficon-service"></span>
              <span class="icon-class">pficon-service</span>
            </li>
            <li>
              <span class="pficon pficon-settings"></span>
              <span class="icon-class">pficon-settings</span>
            </li>
            <li>
              <span class="pficon pficon-user"></span>
              <span class="icon-class">pficon-user</span>
            </li>
            <li>
              <span class="pficon pficon-users"></span>
              <span class="icon-class">pficon-users</span>
            </li>
            <li>
              <span class="pficon pficon-warning-triangle-o"></span>
              <span class="icon-class">pficon-warning-triangle-o</span>
            </li>
          </ul>
          <h3>Deprecated PatternFly Icons</h3>
          <p>These icons are included for backward compatibility, but are no longer recommended for use.</p>
          <ul class="icons list-unstyled">
            <li>
              <span class="pficon pficon-add"></span>
              <span class="icon-class">pficon-add</span>
            </li>
            <li>
              <span class="pficon-layered">
                <span class="pficon pficon-error-octagon"></span>
                <span class="pficon pficon-error-exclamation"></span>
              </span> 
              <span class="icon-class">pficon-layered &gt; pficon-error-octagon + pficon-error-exclamation</span>
            </li>
            <li>
              <span class="pficon-layered">
                <span class="pficon pficon-warning-triangle"></span>
                <span class="pficon pficon-warning-exclamation"></span>
              </span> 
              <span class="icon-class">pficon-layered &gt; pficon-warning-triangle + pficon-warning-exclamation</span>
            </li>
            <li>
              <span class="pficon pficon-remove"></span>
              <span class="icon-class">pficon-remove</span>
            </li>
          </ul>
        </div>
        <div class="col-sm-6 col-md-6">
          <h2>Recommended Font Awesome Icons</h2>
          <p>All <a href="http://fontawesome.io/icons/">Font Awesome</a> icons are available, but only these are recommended for use with PatternFly.</p>
          <ul class="icons list-unstyled">
            <li>
              <span class="fa fa-angle-down"></span>
              <span class="icon-class">fa-angle-down</span>
            </li>
            <li>
              <span class="fa fa-angle-left"></span>
              <span class="icon-class">fa-angle-left</span>
            </li>
            <li>
              <span class="fa fa-angle-right"></span>
              <span class="icon-class">fa-angle-right</span>
            </li>
            <li>
              <span class="fa fa-angle-up"></span>
              <span class="icon-class">fa-angle-up</span>
            </li>
            <li>
              <span class="fa fa-angle-double-left"></span>
              <span class="icon-class">fa-angle-double-left</span>
            </li>
            <li>
              <span class="fa fa-angle-double-right"></span>
              <span class="icon-class">fa-angle-double-right</span>
            </li>
            <li>
              <span class="fa fa-arrow-circle-o-down"></span>
              <span class="icon-class">fa-arrow-circle-o-down</span>
            </li>
            <li>
              <span class="fa fa-ban"></span>
              <span class="icon-class">fa-ban</span>
            </li>
            <li>
              <span class="fa fa-check"></span>
              <span class="icon-class">fa-check</span>
            </li>
            <li>
              <span class="fa fa-clock-o"></span>
              <span class="icon-class">fa-clock-o</span>
            </li>
            <li>
              <span class="fa fa-envelope"></span>
              <span class="icon-class">fa-envelope</span>
            </li>
            <li>
              <span class="fa fa-filter"></span>
              <span class="icon-class">fa-filter</span>
            </li>
            <li>
              <span class="fa fa-lock"></span>
              <span class="icon-class">fa-lock</span>
            </li>
            <li>
              <span class="fa fa-minus"></span>
              <span class="icon-class">fa-minus</span>
            </li>
            <li>
              <span class="fa fa-plus"></span>
              <span class="icon-class">fa-plus</span>
            </li>
            <li>
              <span class="fa fa-power-off"></span>
              <span class="icon-class">fa-power-off</span>
            </li>
            <li>
              <span class="fa fa-refresh"></span>
              <span class="icon-class">fa-refresh</span>
            </li>
            <li>
              <span class="fa fa-search"></span>
              <span class="icon-class">fa-search</span>
            </li>
            <li>
              <span class="fa fa-star"></span>
              <span class="icon-class">fa-star</span>
            </li>
            <li>
              <span class="fa fa-star-o"></span>
              <span class="icon-class">fa-star-o</span>
            </li>
            <li>
              <span class="fa fa-unlock-alt"></span>
              <span class="icon-class">fa-unlock-alt</span>
            </li>
          </ul>
        </div>
      </div>