icons.html
Home
/
themes /
src /
main /
node_modules /
patternfly /
tests /
pages /
icons.html
---
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-applications"></span>
<span class="icon-class">pficon-applications</span>
</li>
<li>
<span class="pficon pficon-arrow"></span>
<span class="icon-class">pficon-arrow</span>
</li>
<li>
<span class="pficon pficon-asleep"></span>
<span class="icon-class">pficon-asleep</span>
</li>
<li>
<span class="pficon pficon-automation"></span>
<span class="icon-class">pficon-automation</span>
</li>
<li>
<span class="pficon pficon-blueprint"></span>
<span class="icon-class">pficon-blueprint</span>
</li>
<li>
<span class="pficon pficon-build"></span>
<span class="icon-class">pficon-build</span>
</li>
<li>
<span class="pficon pficon-builder-image"></span>
<span class="icon-class">pficon-builder-image</span>
</li>
<li>
<span class="pficon pficon-bundle"></span>
<span class="icon-class">pficon-bundle</span>
</li>
<li>
<span class="pficon pficon-catalog"></span>
<span class="icon-class">pficon-catalog</span>
</li>
<li>
<span class="pficon pficon-close"></span>
<span class="icon-class">pficon-close</span>
</li>
<li>
<span class="pficon pficon-cloud-security"></span>
<span class="icon-class">pficon-cloud-security</span>
</li>
<li>
<span class="pficon pficon-cloud-tenant"></span>
<span class="icon-class">pficon-cloud-tenant</span>
</li>
<li>
<span class="pficon pficon-cluster"></span>
<span class="icon-class">pficon-cluster</span>
</li>
<li>
<span class="pficon pficon-connected"></span>
<span class="icon-class">pficon-connected</span>
</li>
<li>
<span class="pficon pficon-container-node"></span>
<span class="icon-class">pficon-container-node</span>
</li>
<li>
<span class="pficon pficon-cpu"></span>
<span class="icon-class">pficon-cpu</span>
</li>
<li>
<span class="pficon pficon-chat"></span>
<span class="icon-class">pficon-chat</span>
</li>
<li>
<span class="pficon pficon-degraded"></span>
<span class="icon-class">pficon-degraded</span>
</li>
<li>
<span class="pficon pficon-delete"></span>
<span class="icon-class">pficon-delete</span>
</li>
<li>
<span class="pficon pficon-disconnected"></span>
<span class="icon-class">pficon-disconnected</span>
</li>
<li>
<span class="pficon pficon-domain"></span>
<span class="icon-class">pficon-domain</span>
</li>
<li>
<span class="pficon pficon-edit"></span>
<span class="icon-class">pficon-edit</span>
</li>
<li>
<span class="pficon pficon-enhancement"></span>
<span class="icon-class">pficon-enhancement</span>
</li>
<li>
<span class="pficon pficon-enterprise"></span>
<span class="icon-class">pficon-enterprise</span>
</li>
<li>
<span class="pficon pficon-equalizer"></span>
<span class="icon-class">pficon-equalizer</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-flavor"></span>
<span class="icon-class">pficon-flavor</span>
</li>
<li>
<span class="pficon pficon-filter"></span>
<span class="icon-class">pficon-filter</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-in-progress"></span>
<span class="icon-class">pficon-in-progress</span>
</li>
<li>
<span class="pficon pficon-info"></span>
<span class="icon-class">pficon-info</span>
</li>
<li>
<span class="pficon pficon-infrastructure"></span>
<span class="icon-class">pficon-infrastructure</span>
</li>
<li>
<span class="pficon pficon-integration"></span>
<span class="icon-class">pficon-integration</span>
</li>
<li>
<span class="pficon pficon-key"></span>
<span class="icon-class">pficon-key</span>
</li>
<li>
<span class="pficon pficon-locked"></span>
<span class="icon-class">pficon-locked</span>
</li>
<li>
<span class="pficon pficon-maintenance"></span>
<span class="icon-class">pficon-maintenance</span>
</li>
<li>
<span class="pficon pficon-memory"></span>
<span class="icon-class">pficon-memory</span>
</li>
<li>
<span class="pficon pficon-migration"></span>
<span class="icon-class">pficon-migration</span>
</li>
<li>
<span class="pficon pficon-monitoring"></span>
<span class="icon-class">pficon-monitoring</span>
</li>
<li>
<span class="pficon pficon-middleware"></span>
<span class="icon-class">pficon-middleware</span>
</li>
<li>
<span class="pficon pficon-network-range"></span>
<span class="icon-class">pficon-network-range</span>
</li>
<li>
<span class="pficon pficon-network"></span>
<span class="icon-class">pficon-network</span>
</li>
<li>
<span class="pficon pficon-off"></span>
<span class="icon-class">pficon-off</span>
</li>
<li>
<span class="pficon pficon-ok"></span>
<span class="icon-class">pficon-ok</span>
</li>
<li>
<span class="pficon pficon-on"></span>
<span class="icon-class">pficon-on</span>
</li>
<li>
<span class="pficon pficon-on-running"></span>
<span class="icon-class">pficon-on-running</span>
</li>
<li>
<span class="pficon pficon-optimize"></span>
<span class="icon-class">pficon-optimize</span>
</li>
<li>
<span class="pficon pficon-orders"></span>
<span class="icon-class">pficon-orders</span>
</li>
<li>
<span class="pficon pficon-paused"></span>
<span class="icon-class">pficon-paused</span>
</li>
<li>
<span class="pficon pficon-pending"></span>
<span class="icon-class">pficon-pending</span>
</li>
<li>
<span class="pficon pficon-plugged"></span>
<span class="icon-class">pficon-plugged</span>
</li>
<li>
<span class="pficon pficon-port"></span>
<span class="icon-class">pficon-port</span>
</li>
<li>
<span class="pficon pficon-print"></span>
<span class="icon-class">pficon-print</span>
</li>
<li>
<span class="pficon pficon-process-automation"></span>
<span class="icon-class">pficon-process-automation</span>
</li>
<li>
<span class="pficon pficon-private"></span>
<span class="icon-class">pficon-private</span>
</li>
<li>
<span class="pficon pficon-project"></span>
<span class="icon-class">pficon-project</span>
</li>
<li>
<span class="pficon pficon-rebalance"></span>
<span class="icon-class">pficon-rebalance</span>
</li>
<li>
<span class="pficon pficon-regions"></span>
<span class="icon-class">pficon-regions</span>
</li>
<li>
<span class="pficon pficon-registry"></span>
<span class="icon-class">pficon-registry</span>
</li>
<li>
<span class="pficon pficon-replicator"></span>
<span class="icon-class">pficon-replicator</span>
</li>
<li>
<span class="pficon pficon-repository"></span>
<span class="icon-class">pficon-repository</span>
</li>
<li>
<span class="pficon pficon-resource-pool"></span>
<span class="icon-class">pficon-resource-pool</span>
</li>
<li>
<span class="pficon pficon-resources-almost-empty"></span>
<span class="icon-class">pficon-resources-almost-empty</span>
</li>
<li>
<span class="pficon pficon-resources-almost-full"></span>
<span class="icon-class">pficon-resources-almost-full</span>
</li>
<li>
<span class="pficon pficon-resources-full"></span>
<span class="icon-class">pficon-resources-full</span>
</li>
<li>
<span class="pficon pficon-restart"></span>
<span class="icon-class">pficon-restart</span>
</li>
<li>
<span class="pficon pficon-route"></span>
<span class="icon-class">pficon-route</span>
</li>
<li>
<span class="pficon pficon-satellite"></span>
<span class="icon-class">pficon-satellite</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-search"></span>
<span class="icon-class">pficon-search</span>
</li>
<li>
<span class="pficon pficon-security"></span>
<span class="icon-class">pficon-security</span>
</li>
<li>
<span class="pficon pficon-server"></span>
<span class="icon-class">pficon-server</span>
</li>
<li>
<span class="pficon pficon-server-group"></span>
<span class="icon-class">pficon-server-group</span>
</li>
<li>
<span class="pficon pficon-service"></span>
<span class="icon-class">pficon-service</span>
</li>
<li>
<span class="pficon pficon-service-catalog"></span>
<span class="icon-class">pficon-service-catalog</span>
</li>
<li>
<span class="pficon pficon-services"></span>
<span class="icon-class">pficon-services</span>
</li>
<li>
<span class="pficon pficon-settings"></span>
<span class="icon-class">pficon-settings</span>
</li>
<li>
<span class="pficon pficon-spinner"></span>
<span class="icon-class">pficon-spinner</span>
</li>
<li>
<span class="pficon pficon-storage-domain"></span>
<span class="icon-class">pficon-storage-domain</span>
</li>
<li>
<span class="pficon pficon-template"></span>
<span class="icon-class">pficon-template</span>
</li>
<li>
<span class="pficon pficon-tenant"></span>
<span class="icon-class">pficon-tenant</span>
</li>
<li>
<span class="pficon pficon-thumb-tack-o"></span>
<span class="icon-class">pficon-thumb-tack-o</span>
</li>
<li>
<span class="pficon pficon-topology"></span>
<span class="icon-class">pficon-topology</span>
</li>
<li>
<span class="pficon pficon-trend-down"></span>
<span class="icon-class">pficon-trend-down</span>
</li>
<li>
<span class="pficon pficon-trend-up"></span>
<span class="icon-class">pficon-trend-up</span>
</li>
<li>
<span class="pficon pficon-unknown"></span>
<span class="icon-class">pficon-unknown</span>
</li>
<li>
<span class="pficon pficon-unlocked"></span>
<span class="icon-class">pficon-unlocked</span>
</li>
<li>
<span class="pficon pficon-unplugged"></span>
<span class="icon-class">pficon-unplugged</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-vcenter"></span>
<span class="icon-class">pficon-vcenter</span>
</li>
<li>
<span class="pficon pficon-virtual-machine"></span>
<span class="icon-class">pficon-virtual-machine</span>
</li>
<li>
<span class="pficon pficon-volume"></span>
<span class="icon-class">pficon-volume</span>
</li>
<li>
<span class="pficon pficon-warning-triangle-o"></span>
<span class="icon-class">pficon-warning-triangle-o</span>
</li>
<li>
<span class="pficon pficon-zone"></span>
<span class="icon-class">pficon-zone</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-arrow-circle-o-up"></span>
<span class="icon-class">fa-arrow-circle-o-up</span>
</li>
<li>
<span class="fa fa-ban"></span>
<span class="icon-class">fa-ban</span>
</li>
<li>
<span class="fa fa-book"></span>
<span class="icon-class">fa-book</span>
</li>
<li>
<span class="fa fa-briefcase"></span>
<span class="icon-class">fa-briefcase</span>
</li>
<li>
<span class="fa fa-bug"></span>
<span class="icon-class">fa-bug</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-cogs"></span>
<span class="icon-class">fa-cogs</span>
</li>
<li>
<span class="fa fa-cube"></span>
<span class="icon-class">fa-cube</span>
</li>
<li>
<span class="fa fa-cubes"></span>
<span class="icon-class">fa-cubes</span>
</li>
<li>
<span class="fa fa-database"></span>
<span class="icon-class">fa-database</span>
</li>
<li>
<span class="fa fa-envelope"></span>
<span class="icon-class">fa-envelope</span>
</li>
<li>
<span class="fa fa-gears"></span>
<span class="icon-class">fa-gears</span>
</li>
<li>
<span class="fa fa-heartbeat"></span>
<span class="icon-class">fa-heartbeat</span>
</li>
<li>
<span class="fa fa-lightbulb-o"></span>
<span class="icon-class">fa-lightbulb-o</span>
</li>
<li>
<span class="fa fa-line-chart"></span>
<span class="icon-class">fa-line-chart</span>
</li>
<li>
<span class="fa fa-clock-o"></span>
<span class="icon-class">fa-cogs</span>
</li>
<li>
<span class="fa fa-map-marker"></span>
<span class="icon-class">fa-map-marker</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-plus-square"></span>
<span class="icon-class">fa-plus-square</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-shield"></span>
<span class="icon-class">fa-shield</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-tachometer"></span>
<span class="icon-class">fa-tachometer</span>
</li>
<li>
<span class="fa fa-thumb-tack"></span>
<span class="icon-class">fa-thumb-tack</span>
</li>
<li>
<span class="fa fa-wrench"></span>
<span class="icon-class">fa-wrench</span>
</li>
</ul>
</div>
</div>