Icons

If you're a developer, check out our development onboarding guide to learn how to install and use our icon set.

For additional usage instruction, refer to the icon component pages.

Icon sizes

Icon size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.

PatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same).

Inline icons

Inline icons must be center-aligned horizontally when placed next to text and center-aligned vertically when stacked.

Icon alignment

Use the following semantic tokens to ensure that icons are properly aligned and match the correct font size:

Headings

Size
Token
Example
1.375rem (22px)
pf-t--global--icon--size--font--heading--h1

Heading

1.25rem (20px)
pf-t--global--icon--size--font--heading--h2

Heading

1.125rem (18px)
pf-t--global--icon--size--font--heading--h3

Heading

1rem (16px)
pf-t--global--icon--size--font--heading--h4

Heading

1rem (16px)
pf-t--global--icon--size--font--heading--h5
Heading
1rem (16px)
pf-t--global--icon--size--font--heading--h6
Heading

Body text

Size
Token
Example
0.75rem (12px)
pf-t--global--icon--size--font--body--sm
Small body
0.875rem (14px)
pf-t--global--icon--size--font--body--default

Default body

1rem (16px)
pf-t--global--icon--size--font--body--lg

Large body

Standalone icons

Occasionally, you may need to use a standalone icon that isn't aligned with any kind of text. PatternFly supports a range of icon sizes that can adapt to these use cases, including small, medium, large, x-large, 2xl, and 3xl icons. These sizes correspond to the following font sizes and tokens:

Size
Token
Example
Small (0.75rem, 12px)
--pf-t--global--icon--size--sm
Medium (0.875rem, 14px)
--pf-t--global--icon--size--md
Large (1rem, 16px)
--pf-t--global--icon--size--lg
X-large (1.375rem, 22px)
--pf-t--global--icon--size--xl
2xl (3.5rem, 56px)
--pf-t--global--icon--size--2xl
3xl (6rem, 96px)
--pf-t--global--icon--size--3xl

Medium icons are typically the most versatile size to use in a UI. Most icons in PatternFly components are medium; other sizes are used sparingly.

Icon colors

All icon colors that you use should align with the proper semantic design token. For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on.

Icon state
Color token
Example
Danger
--pf-t--global--icon--color--status--danger--default
Warning
--pf-t--global--icon--color--status--warning--default
Success
--pf-t--global--icon--color--status--success--default
Info
--pf-t--global--icon--color--status--info--default
Custom
--pf-t--global--icon--color--status--custom--default

To learn more about icon colors and color tokens, visit our colors page.

PatternFly icons

PatternFly uses custom icons and selections from Font Awesome Free, as shown in this table. 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.

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 reference our development onboarding guide when using 'fa' regular icons.

React icons

When using React, you can import 'pficon' icons from our react-icons package by including the following line: import { [insert-icon-name] } from '@patternfly/react-icons/dist/esm/icons/[insert-hyphenated-icon-name]';

For example: import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';

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 icons yourself by doing one of the following:

  1. Host it yourself
  2. Include the icons via a package manager
  3. Link to a CDN
  4. Use the SVG code directly from fontawesome.com (proper attribution is required)

All icons

The following table provides details and usage information for all icons that PatternFly supports.

For guidance related to icon tooltips, 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 (via patternfly-icons.zip.)

193 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. This is an old icon, going forward, use the pficon-severity-critical icon.
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-severity-criticalpficonSeverityCriticalIconIndicates the highest level of severity for an error or issue. This icon should be used instead of pficon-critical-risk for new implementations.
pficon-severity-importantpficonSeverityImportantIconIndicates important severity for an error or issue.
pficon-severity-minorpficonSeverityMinorIconIndicates minor severity for an error or issue.
pficon-severity-moderatepficonSeverityModerateIconIndicates moderate severity for an error or issue.
pficon-severity-nonepficonSeverityNoneIconIndicates no severity for an error or issue.
pficon-severity-undefinedpficonSeverityUndefinedIconIndicates undefined severity for an error or issue. Use if a severity level has not been determined yet, but is expected to change and be defined later.
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