PatternFly

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-v5-global--icon--FontSize--sm

Medium (18px)

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

Large (24px)

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

X-large (54px)

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

Small icons

Small icons
Small icons

Medium icons

Medium icons

Large icons

Large icons

X-large icons

Extra 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 alignment

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)
187 items

IconStyleReactUnicode
fa-angle-double-leftfasAngleDoubleLeftIconIndicates the ability to navigate to the first page of a multi-page data set
fa-angle-double-rightfasAngleDoubleRightIconIndicates the ability to navigate to the last page of a multi-page data set
fa-angle-downfasAngleDownIconIndicates expandable components such as accordions, progressive disclosures, or expandable lists are currently expanded. Clicking this will collapse the component.
fa-angle-leftfasAngleLeftIconIndicates the ability to navigate to the previous page of a multi-page data set
fa-angle-rightfasAngleRightIconIndicates expandable elements such as accordions, progressive disclosures, or expandable lists are currently collapsed. Clicking this will expand the element.

Also indicates the ability to navigate to the next page in a multipage data set.
fa-angle-upfasAngleUpIconIndicates expandable table rows (on mobile) are currently expanded. Clicking this will collapse the component.
fa-arrow-circle-downfasArrowCircleDownIconRepresents status: an item (such as a VM) is down
fa-arrow-circle-upfasArrowCircleUpIconRepresents status: an item (such as a VM) is up

Tooltip:Upgrade
fa-arrow-rightfasArrowRightIconIndicates the ability to take an action or navigate to another page. Is paired with text
fa-arrows-alt-vfasArrowsAltVIconIndicates the availability of a sorting function in a table header
fa-balance-scalefasBalanceScaleIconRepresents status: an item needs rebalancing
fa-banfasBanIconRepresents status: an item is disabled, canceled, terminated or is not ready
fa-barsfasBarsIconIndicates the ability to collapse a navigation menu
fa-bellfasBellIconIndicates the ability to open a notification drawer.

Tooltip:Notifications
fa-bell (blue)BellIconRepresents status: default notification
fa-bugfasBugIconRepresents status: there is a bug present
fa-calendar-altfarOutlinedCalendarAltIconIndicates a date picker function is available
fa-caret-downfasCaretDownIconIndicates the ability to acces option panels for components like drop-downs, filters and page ranges
fa-checkfasCheckIconRepresents status: Indicates a switch toggle is in the enabled position
fa-check-circlefasCheckCircleIconIndicates the ability to commit edited changes

Represents status: OK in content views such as a tables
fa-clipboard-checkfasClipboardCheckIconRepresents orders or tasks
fa-clockfarOutlinedClockIconRepresents a time interval
fa-codefasCodeIconRepresents code
fa-code-branchfasCodeBranchIconRepresents code branch
fa-cogfasCogIconIndicates availability of configurable settings

Tooltip:Settings
fa-columnsfasColumnsIconIndicates the ability to manage columns for a table view
fa-commentsfarOutlinedCommentsIconIndicates availability of commenting
fa-compressfasCompressIconIndicates the ability to compress an item. Should toggle with fa-expand
fa-compress-arrows-altfasCompressArrowsAltIconIndicates the ability to compress an item (alt concept). Should toggle with fa-expand-arrows-alt
fa-copyfasCopyIconIndicates the availability of a copy to clipboard function

Tooltip:Copy
fa-cubefasCubeIconRepresents a container
fa-cubesfasCubesIconRepresents a Kubernetes pod(s)
fa-databasefasDatabaseIconRepresents a database
fa-desktopfasDesktopIconRepresents a desktop, workstation or terminal
fa-downloadfasDownloadIconIndicates a download function is available

Tooltip:Download
fa-dropboxfabDropboxIconRepresents brand: Dropbox
fa-drupalfabDrupalIconRepresents brand: Drupal
fa-ellipsis-vfasEllipsisVIconIndicates a contextual menu of actions or additional actions is available

Tooltip:More options
fa-exclamation-circlefasExclamationCircleIconRepresents alert status: danger, major error or critical error
fa-exclamation-trianglefasExclamationTriangleIconRepresents alert status: warning
fa-expandfasExpandIconIndicates the ability to expand an item. Should toggle with fa-compress
fa-expand-arrows-altfasExpandArrowsAltIconIndicates the ability to expand an item (alt concept). Should toggle with fa-compress-arrows-alt
fa-external-link-altfasExternalLinkAltIconIndicates the link navigates to an external site
fa-eyefasEyeIconIndicates the content of a component is currently hidden but can be revealed
fa-eye-slashfasEyeSlashIconIndicates the content of a component is revealed but can be hidden
fa-facebook-squarefabFacebookSquareIconRepresents brand: Facebook
fa-filefasFileIconRepresents a file type
fa-filterfasFilterIconIndicates the ability to filter search results or datasets
fa-flagfasFlagIconRepresents a message.

Also indicates the ability to access a messages.
fa-folderfasFolderIconRepresents a collapsed hierarchical group.

Indicates the ability to expand the group.
fa-folder-openfasFolderOpenIconRepresents an expanded hierarchical group.

Indicates the ability to collapse the group.
fa-githubfabGithubIconRepresents brand: GitHub
fa-gitlabfabGitlabIconRepresents brand: GitLab
fa-googlefabGoogleIconRepresents brand: Google
fa-grip-horizontalfasGripHorizontalIconIndicates the ability to move a vertically-oriented component via drag and drop
fa-grip-verticalfasGripVerticalIconIndicates the ability to move a horizontally-oriented component via drag and drop
fa-hddfasOutlinedHddIconRepresents a single node or host
fa-historyfasHistoryIconRepresents status: restarting
fa-homefasHomeIconIndicates a link to a default/home page
fa-imagefasImageIconRepresents an image
fa-info-circlefasInfoCircleIconRepresents alert status: information
fa-jsfabJsIconRepresents brand: js
fa-keyfasKeyIconRepresents an SSH key or similar security concepts
fa-linkedinfabLinkedinIconRepresents brand: LinkedIn
fa-linuxfabLinuxIconRepresents brand: Linux
fa-listfasListIconRepresents data view content in a list format.
fa-lockfasLockIconRepresents status: locked
fa-lock-openfasLockOpenIconRepresents status: unlocked
fa-long-arrow-alt-downfasLongArrowAltDownIconRepresents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type in a data table column. Clicking this will toggle the sort to ascending.
fa-long-arrow-alt-upfasLongArrowAltUpIconRepresents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type in a data table column. Clicking this will toggle the sort to descending.
fa-map-markerfasMapMarkerIconRepresents a locale
fa-memoryfasMemoryIconRepresents the memory on a device
fa-microchipfasMicrochipIconRepresents the CPU of a device
fa-minusfasMinusIconIndicates the ability to remove an item
fa-minus-circlefasMinusCircleIconIndicates the ability to remove an item (alt concept)
fa-pausefasPauseIconIndicates the ability to pause. Should toggle with fa-play
fa-pause-circlefasPauseCircleIconRepresents status: an interruption and/or stoppage of a process
fa-pencil-altfasPencilAltIconIndicates the ability to edit an item

Tooltip:Edit
fa-playfasPlayIconIndicates the ability to start or resume. Should toggle with fa-pause
fa-plusfasPlusIconIndicates the ability to add an item; not for creating completely new objects (see pficon-circle-add)
fa-plus-circlefasPlusCircleIconIndicates the ability to create an item
fa-power-offfasPowerOffIconRepresents status: powered on
fa-printfasPrintIconIndicates the availability of a print function
fa-question-circlefasQuestionCircleIconIndicates the availability of a help system in the masthead
fa-question-circle (outlined)farOutlinedQuestionCircleIconIndicates the availability of contextual help
fa-redofasRedoIconIndicates the ability to refresh. Please use the animated spinner to indicate that something is “loading” or in the middle of processing
fa-routefasRouteIconRepresents a route
fa-searchfasSearchIconIndicates that that user may perform a search

Tooltip:Search
fa-search-minusfasSearchMinusIconIndicates the ability to zoom out

Tooltip:Search minus
fa-search-plusfasSearchPlusIconIndicates the ability to zoom in

Tooltip:Search plus
fa-share-squarefasShareSquareIconIndicates the ability to share via various methods with others
fa-sort-amount-downfasSortAmountDownIconRepresents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type.
fa-sort-amount-down-altfasSortAmountDownAltIconRepresents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type.
fa-stack-overflowfabStackOverflowIconRepresents brand: Stack Overflow
fa-sync-altfasSyncAltIconIndicates the availability of a sync action

Tooltip:Sync; Refresh; Running
fa-tablefasTableIconRepresents data view content in a table format
fa-tachometer-altfasTachometerAltIconRepresents data view content in a dashboard
fa-tagfasTagIconIndicates the abiltiy to access or create a set of tags
fa-thfasThIconRepresents data view content in a small card format
fa-th-largefasThLargeIconRepresents data view content in a large card format
fa-thumbtackfasThumbtackIconIndicates the ability to pin an item
fa-timesfasTimesIconIndicates the ability to close a modal or other panel. Also indicates the ability to clear existing data, such as filter criteria or labels
fa-times-circlefasTimesCircleIconIndicates the ability to close the about modal
fa-trashfasTrashIconIndicates the ability to delete

Tooltip:Delete
fa-twitterfabTwitterIconRepresents brand: Twitter
fa-undofasUndoIconIndicates the ability to undo an a step in a historical log
fa-uploadfasUploadIconIndicates an upload function is available
fa-userfasUserIconRepresents a user (in a dataset, paired with a username).

Indicates the availability of a user profile (in the masthead, paired with a username).
fa-usersfasUsersIconRepresents multiple users, a user grouping or project
fa-window-restorefarOutlinedWindowRestoreIconIndicates the ability to open link in a new window
fa-windowsfabWindowsIconRepresents brand: Windows
fa-wrenchfasWrenchIconRepresents status: in preparation for maintenance
pficon-add-circle-opficonAddCircleOIconIndicates 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.
pficon-ansible-towerpficonAnsibleTowerIconRepresents "Ansible Tower"
pficon-asleeppficonAsleepIconRepresents an item is asleep or in power suspended mode
pficon-attention-bellpficonAttentionBellIconRepresents status: attention
pficon-automationpficonAutomationIconRepresents a process-automation object
pficon-blueprintpficonBlueprintIconRepresents a blueprint
pficon-buildpficonBuildIconRepresents a build
pficon-builder-imagepficonBuilderImageIconRepresents a builder image
pficon-bundlepficonBundleIconRepresents a package; used in Satellite, Cockpit, and Composer to indicate a generic package or rpm
pficon-catalogpficonCatalogIconIndicates the availability of a catalog or library
pficon-cloud-securitypficonCloudSecurityIconRepresents cloud security
pficon-cloud-tenantpficonCloudTenantIconRepresents a cloud tenant
pficon-clusterpficonClusterIconRepresents a cluster or server
pficon-connectedpficonConnectedIconRepresents an item's power is on and is “up”; this is a more active alternative to “pficon-on”
pficon-critical-riskpficonCriticalRiskIconRepresents potential critical impact on a system or cluster
pficon-data-processorpficonDataProcessorIconRepresents a data processor
pficon-data-sinkpficonDataSinkIconRepresents a data sink
pficon-data-sourcepficonDataSourceIconRepresents a data source
pficon-degradedpficonDegradedIconVolume replication is degraded
pficon-disconnectedpficonDisconnectedIconRepresents an item's power is off and is “down”; this is a more active alternative to “pficon-off”
pficon-domainpficonDomainIconRepresents a domain
pficon-enhancementpficonEnhancementIconRepresents status: enhancement advisory is present
pficon-enterprisepficonEnterpriseIconRepresents an enterprise
pficon-exportpficonExportIconIndicates the ability to export a file or other data

Tooltip:Export
pficon-flavorpficonFlavorIconRepresents a flavor
pficon-importpficonImportIconIndicates the ability to import a file or other data
pficon-in-progresspficonInProgressIconRepresents running a determinite action
pficon-infrastructurepficonInfrastructureIconRepresents an infrastructure
pficon-integrationpficonIntegrationIconRepresents an integration of two or more objects
pficon-middlewarepficonMiddlewareIconRepresents middleware
pficon-migrationpficonMigrationIconRepresents an item such as a VM is currently migrating
pficon-modulepficonModuleIconRepresents a module
pficon-monitoringpficonMonitoringIconRepresents monitoring
pficon-multiclusterpficonMulticlusterIconIndicates a multicluster object
pficon-networkpficonNetworkIconRepresents network
pficon-offpficonOffIconRepresents status: powered off
pficon-open-drawer-rightpficonOpenDrawerRightIconOpen or close a drawer
pficon-openshiftpficonOpenshiftIconRepresents brand: OpenShift
pficon-openstackpficonOpenstackIconRepresents brand: OpenStack
pficon-optimizepficonOptimizeIconIndicates the ability to optimize an item or a process
pficon-packagepficonPackageIconRepresents a package
pficon-pendingpficonPendingIconRepresents status: pending; currently waiting on contingencies
pficon-pficon-network-rangepficonPficonNetworkRangeIconRepresents network range
pficon-pficon-satellitepficonPficonSatelliteIconRepresents brand: Satellite
pficon-pficon-templatepficonPficonTemplateIconRepresents a template; includes contents or instructions used to generate one or more instances of a final output
pficon-pficon-vcenterpficonPficonVcenterIconRepresents a vcenter
pficon-portpficonPortIconRepresents a port or route
pficon-privatepficonPrivateIconRepresents status: private; cannot access with current credentials
pficon-process-automationpficonProcessAutomationIconRepresents process automation
pficon-regionspficonRegionsIconRepresents a region
pficon-registrypficonRegistryIconRepresents a registry
pficon-replicatorpficonReplicatorIconRepresents a replicator
pficon-repositorypficonRepositoryIconRepresents a repository
pficon-resource-poolpficonResourcePoolIconRepresents a resource pool
pficon-resources-almost-emptypficonResourcesAlmostEmptyIconRepresents status: is almost empty
pficon-resources-almost-fullpficonResourcesAlmostFullIconRepresents status: is almost full
pficon-resources-emptypficonResourcesEmptyIconRepresents status: is empty
pficon-resources-fullpficonResourcesFullIconRepresents status: is full
pficon-runningpficonRunningIconRepresents status: running
pficon-savepficonSaveIconIndicates the ability to save a file or other object
pficon-securitypficonSecurityIconRepresents status: security advisory is present
pficon-server-grouppficonServerGroupIconRepresents a server group
pficon-servicepficonServiceIconRepresents a Kubernetes service
pficon-service-catalogpficonServiceCatalogIconIndicates availability of a catalog/library to browse
pficon-servicespficonServicesIconRepresents services
pficon-storage-domainpficonStorageDomainIconIndicates a storage domain
pficon-taskpficonTaskIconIndicates the ability to open a task drawer. Also can represent tasks or activity.

Tooltip:Tasks
pficon-tenantpficonTenantIconRepresents a tenant
pficon-topologypficonTopologyIconRepresents data view content in a topology format
pficon-trend-downpficonTrendDownIconRepresents status: downward trend
pficon-trend-uppficonTrendUpIconRepresents status: upward trend
pficon-unknownpficonUnknownIconRepresents status: unknown
pficon-virtual-machinepficonVirtualMachineIconRepresents a virtual machine
pficon-volumepficonVolumeIconRepresents a volume
pficon-zonepficonZoneIconRepresents a zone; a grouping of servers based on geographic location, network location, or function

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

Contextual usage
pficon-arrow
pficon-applications
window-restore
Indicates the ability to open link in a new window
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-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-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-unplugged
pf-icon-plugged
n/a
These icons remain the PatternFly font, but their use is now obsolete
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-maintenance
Tools
fa-wrench
Represents status: in preparation for maintenance
pf-icon pf-icon-users
pf-icon-project
fas fa-user-friends
fa-users
Represents multiple users, a user grouping or project
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)
pficon-history
Undo Alt
fa-undo
Indicates the ability to undo an a step in a historical log
pf-icon-delete
fa-trash
Indicates the ability to delete
pf-icon-error-circle-o
fa-times-circle
Indicates the ability to clear existing data, such as filter criteria or tags
pf-icon-close
fa-times
Indicates the ability to close a modal or other panel
pf-icon-thumb-tack
fa-thumbtack
Indicates the ability to pin an item
fa-th-large iconfa-th-large
fa-th-large
Represents data view content in a large card format
fa-th iconfa-th
fa-th
Represents data view content in a small card format
fa-tachometer iconfa-tachometer
fa-tachometer-alt
Indicates the availability of a dashboard view
fa-table iconfa-table
fa-table
Represents data view content in a table format
Sync
fa-sync-alt
Indicates the availability of a sync action
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.
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.
pficon-search iconpficon-search
fa-search
Indicates that that user may perform a search
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
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 pf-icon-print
fa-print
Indicates the availability of a print function
pf-icon-on
fa-power-off
Represents status: powered on
fas fa-edit
pf-icon pf-icon-edit
fa-pencil-alt
Indicates the ability to edit
Outline Pause Circle
pf-icon-paused
fa-pause-circle
Represents status: an interruption and/or stoppage of a process
pf-icon-cpu
fa-microchip
Represents the CPU of a device
pf-icon pf-icon-memory
fa-memory
Represents the memory on a device
fa-map-marker
fa-map-marker
Represents a locale
pf-icon-unlocked
fa-lock-open
Represents status: unlocked
pf-icon-locked
fa-lock
Represents status: locked
pficon-key iconpficon-key
fa-key
Represents an SSH key or similar security concepts
pf-icon-info
fa-info-circle
Represents alert status: information
pf-icon pf-icon-home
fa-home
Indicates a link to a default/home page
pf-icon-history iconpf-icon-history
fa-history
Represents status: restarting
pf-container-node
fa-hdd
Represents a single node or host
pf-icon-folder-open
fa-folder-open
Represents an expanded hierarchical group. Indicates the ability to collapse the group.
pf-icon-folder-close
fa-folder
Represents a collapsed hierarchical group. Indicates the ability to expand the group.
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 pf-icon-filter
fa-filter
Indicates the ability to filter search results or datasets
pf-icon-warning-triangle
fa-exclamation-triangle
Represents alert status: warning
pficon-error-circle-o
fa-exclamation-circle
Represents alert status: danger, major error or critical error
pf-icon-screen
TV
fa-desktop
Represents a desktop, workstation or terminal
pf-icon-chat
fa-comments
Indicates availability of commenting
fa-columns iconfa-columns
fa-columns
Indicates the ability to manage columns for a table view
fas fa-cogs
pficon-settings iconpficon-settings
fa-cog
Indicates availability of configurable settings
fa-clock-o iconfa-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.
pf-icon-orders
fa-clipboard-check
Represents orders or tasks
pf-icon-ok
Outlined Check Circle
fa-check-circle
Represents alert status: success
Sort Down
fa-caret-down
Indicates the ability to acces options for components like drop-downs, filters and page ranges
fas fa-calendar-alt
fa-calendar-alt
Indicates a date picker function is available
fa-bell
fa-bell-slash
fa-bell
Indicates the ability to open a notification drawer.
pf-icon-rebalance
fa-balance-scale
Represents status: an item needs rebalancing
fas fa-sort
fa-arrows-alt-v
Indicates the availability of a sorting function in a table header
fa-arrow-circle-o-up iconfa-arrow-circle-o-up
fa-arrow-circle-up
Represents status: an item (such as a VM) is up
fa-arrow-circle-o-down iconfa-arrow-circle-o-down
fa-arrow-circle-down
Represents status: an item (such as a VM) is down
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.
pf-icon-spinner
pf-icon-spinner
Use the animated PatternFly Spinner component to indicate that something is "loading" or in the middle of processing

View source on GitHub