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 colors

Visit our colors page to learn more about icon colors.

Icon sizes

PatternFly supports a range of icon sizes so that all icons can be adapted to different use cases. This range includes small, medium, large, and x-large icons, which correspond to the following font sizes and CSS variables:

Small (12px)

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

Medium (16px)

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

Large (24px)

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

X-large (54px)

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

Medium icons are typically the most versatile size to use across UIs. PatternFly uses medium icons in most applications. Small, large and x-large icons are used sparingly across PatternFly components.

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 an icon, when it is placed next to text, it should be center-aligned horizontally, as shown in our link button example. Stacked icons should also be center-aligned vertically.

Icon alignment

PatternFly icons

PatternFly uses custom icons and selections from Font Awesome Free. If PatternFly doesn't offer an icon for your use case, you can download SVGs of additional 'fa' icons from Font Awesome's free set. Be sure to properly attribute these additional icons as outlined on the Font Awesome site.

These icons are the same as those in the PatternFly Sketch design kit, but you can use any Font Awesome icon so long it aligns with our icon guidelines.

HTML icons

When using HTML, use the following syntax:

  • For 'pficon' icons: <i class="pf-icon [insert-icon-name]"></i>
  • For 'fa' solid icons: <i class="fas [insert-icon-name]"></i>
  • 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.

React icons

When using React, include the following import line 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 are Font Awesome solid (FAS) webfont icons. If you're using icons via <i class="[fa, far, fas] [insert-icon-name]"></i>, you can use any FAS icon. If you need to use a Font Awesome regular (FAR) icon, you must include the FAR icon(s) yourself by doing one of the following:

  1. Hosting it yourself
  2. Including the icon(s) via a package manager
  3. Linking to a CDN
  4. Using the SVG code directly from fontawesome.com (proper attribution is required)

All icons

The following table outlines details for all icons supported by PatternFly, as well as guidance for using each icon.

For guidance related to tooltips for icons, refer to our tooltips writing guide.

Select any single icon in the table to download it as an SVG. You can also download all icon SVGs on GitHub.

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
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.
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
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
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
fa-dropboxfabDropboxIconRepresents brand: Dropbox
fa-drupalfabDrupalIconRepresents brand: Drupal
fa-ellipsis-vfasEllipsisVIconIndicates a contextual menu of actions or additional actions is available
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
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
fa-search-minusfasSearchMinusIconIndicates the ability to zoom out
fa-search-plusfasSearchPlusIconIndicates the ability to zoom in
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
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
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
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.
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

View source on GitHub