Icons

If you're a developer, check out our getting started page to learn more about how to get and use our icon set.

Icon sizes

Medium icons are used as our base size across our system as a whole and we recommend using this base size within your applications. Small, large and x-large icons are used sparingly across PatternFly components. Here is a complete list of icon sizes:

Small (10px)

--pf-global--icon--FontSize--sm

Medium (18px)

--pf-global--icon--FontSize--md

Large (24px)

--pf-global--icon--FontSize--lg

X-large (54px)

--pf-global--icon--FontSize--xl

Small icons

Medium icons

Large icons

X-large icons

No matter the size of the icon, when icons are next to text, they should be center-aligned horizontally. An example of this alignment in a component is a link button. If icons are stacked, they should also be center-aligned vertically.

Icon colors

Visit our colors page to learn more about icon colors.

All icons

PatternFly uses custom icons and selections from Font Awesome Free. PatternFly icons are mostly two dimensional and flat. Navigate to Font Awesome’s website to download SVGs of any additional ‘fa’ icons within their free set. Proper attribution should be given as outlined on the Font Awesome site.

Click on any single icon in the table to download it as an SVG. Download all icon SVGs here.

If you’re a designer, these icons are the same set as the ones in the PatternFly Sketch Design Kit. It is possible to use any FontAwesome icon as long it follows the guidelines above.

If you’re looking to copy HTML for an icon:
Use this for 'pficon' icons: <i class="pf-icon [insert-icon-name]"></i>
Use this for 'fa' solid icons: <i class="fas [insert-icon-name]"></i>
Use this for 'fa' regular icons: <i class="far [insert-icon-name]"></i>
Note: Be sure to read how to get started with icons when using 'fa' regular icons

If you're looking to copy React for an icon:
Use this for 'pficon' icons: import { [insert-icon-name] } from '@patternfly/react-icons'

Font Awesome solid (FAS) vs Font Awesome regular (FAR)

The Font Awesome icons included with PatternFly core are FAS (Font Awesome solid) webfont icons. If you're using icons via <i class="[fa, far, fas] [insert-icon-name]"></i>, designers and developers may use any FAS icon in their designs. If a FAR icon is needed, developers must include the FAR icon(s) themselves. There are a few ways of doing so:

1. Hosting it yourself
2. Including via a package manager
3. Linking to a CDN
4. Use the SVG code directly from fontawesome.com (though this requires attribution)

Updated icon recommendations

We’ve recently updated some of our PatternFly icons as well as icon usage guidelines. If you are using an outdated icon, we suggest you migrate over to the newest recommendations.

62 items

---

Old icon	Updated icon	Contextual usage
angle-up	fa-angle-right	Indicates expandable elements such as accordions, progressive disclosures, or expandable lists are currently collapsed. Clicking this will expand the element. It also indicates the ability to navigate to the next page in a multipage data set.
fa-arrow-circle-o-down	fa-arrow-circle-down	Represents status: an item (such as a VM) is down
fa-arrow-circle-o-up	fa-arrow-circle-up	Represents status: an item (such as a VM) is up
fas fa-sort	fa-arrows-alt-v	Indicates the availability of a sorting function in a table header
fas fa-calendar-alt	fa-calendar-alt	Indicates a date picker function is available
fa-columns	fa-columns	Indicates the ability to manage columns for a table view
fas fa-plus-square	fa-plus-circle pf-icon-add-circle-o	Indicates the ability to create an item Indicates the ability to create an item. Use this if there are many instances of this icon in a UI (data list, table, etc) to reduce visual noise.
pf-icon-rebalance	fa-balance-scale	Represents status: an item needs rebalancing
fa-bell fa-bell-slash	fa-bell	Indicates the ability to open a notification drawer.
Sort Down	fa-caret-down	Indicates the ability to acces options for components like drop-downs, filters and page ranges
fa-clock-o	fa-clock	If read-only, paired with a label to indicate a time interval. If interactive, indicates the availability of a time picker control.
fas fa-caret-down fas fa-sort-amount-up sort-alpha-down-alt sort-numeric-down-alt	fa-sort-amount-down	Represents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type.
fas fa-caret-up pf-icon-sort-common-asc sort-alpha-down sort-numeric-down	fa-sort-amount-down-alt	Represents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type.
pf-icon-ok Outlined Check Circle	fa-check-circle	Represents alert status: success
pf-icon-orders	fa-clipboard-check	Represents orders or tasks
fas fa-cogs pficon-settings	fa-cog	Indicates availability of configurable settings
pf-icon-chat	fa-comments	Indicates availability of commenting
pf-icon-screen TV	fa-desktop	Represents a desktop, workstation or terminal
pficon-error-circle-o	fa-exclamation-circle	Represents alert status: danger, major error or critical error
pf-icon-warning-triangle	fa-exclamation-triangle	Represents alert status: warning
pf-icon pf-icon-filter	fa-filter	Indicates the ability to filter search results or datasets
pf-icon-messages	fa-flag	If read-only, paired with a label to represent a message. If interactive, indicates the ability to access messages
pf-icon-folder-close	fa-folder	Represents a collapsed hierarchical group. Indicates the ability to expand the group.
pf-icon-folder-open	fa-folder-open	Represents an expanded hierarchical group. Indicates the ability to collapse the group.
pf-container-node	fa-hdd	Represents a single node or host
pf-icon-history	fa-history	Represents status: restarting
pficon-history Undo Alt	fa-undo	Indicates the ability to undo an a step in a historical log
pf-icon pf-icon-home	fa-home	Indicates a link to a default/home page
pf-icon-info	fa-info-circle	Represents alert status: information
pficon-key	fa-key	Represents an SSH key or similar security concepts
pf-icon-locked	fa-lock	Represents status: locked
pf-icon-unlocked	fa-lock-open	Represents status: unlocked
fa-map-marker	fa-map-marker	Represents a locale
pf-icon pf-icon-memory	fa-memory	Represents the memory on a device
pf-icon-cpu	fa-microchip	Represents the CPU of a device
Outline Pause Circle pf-icon-paused	fa-pause-circle	Represents status: an interruption and/or stoppage of a process
fas fa-edit pf-icon pf-icon-edit	fa-pencil-alt	Indicates the ability to edit
pf-icon-unplugged pf-icon-plugged	n/a	These icons remain the PatternFly font, but their use is now obsolete
pf-icon-on	fa-power-off	Represents status: powered on
pf-icon pf-icon-print	fa-print	Indicates the availability of a print function
pf-icon-help	fa-question-circle fa-question-circle	Indicates the availability of contextual help Indicates the availability of a help system in the masthead
pf-icon-rebooting pf-icon-spinner2	fa-redo	Indicates the ability to refresh. Please use the animated spinner to indicate that something is “loading” or in the middle of processing
pficon-search	fa-search	Indicates that that user may perform a search
Sync	fa-sync-alt	Indicates the availability of a sync action
fa-table	fa-table	Represents data view content in a table format
fa-tachometer	fa-tachometer-alt	Indicates the availability of a dashboard view
fa-th	fa-th	Represents data view content in a small card format
fa-th-large	fa-th-large	Represents data view content in a large card format
pf-icon-thumb-tack	fa-thumbtack	Indicates the ability to pin an item
pf-icon-close	fa-times	Indicates the ability to close a modal or other panel
pf-icon-error-circle-o	fa-times-circle	Indicates the ability to clear existing data, such as filter criteria or tags
pf-icon-delete	fa-trash	Indicates the ability to delete
pf-icon-user User Alt	fa-user	If read-only, represents a user (in a dataset, precedes a username). If interactive, indicates the availability of a user profile (often in the masthead, coupled with a username)
pf-icon pf-icon-users pf-icon-project fas fa-user-friends	fa-users	Represents multiple users, a user grouping or project
pf-icon-maintenance Tools	fa-wrench	Represents status: in preparation for maintenance
pficon-arrow pficon-applications	window-restore	Indicates the ability to open link in a new window
pficon-arrow	fas fa-share-square	Indicates the ability to share via various methods with others
pficon-on-running	pf-icon-running	Represents status: an item is running or active
fas fa-save	pficon-save	Indicates the ability to save a file or other object
pficon-server	pficon-cluster	Represents a cluster or server
pficon-dragdrop	grip-horizontal grip-vertical	Indicates the ability to move a vertically-oriented component via drag and drop Indicates the ability to move a horizontally-oriented component via drag and drop
pf-icon-spinner pf-icon-spinner		Use the animated PatternFly Spinner component to indicate that something is "loading" or in the middle of processing