Skip to Content
Patternfly Logo

Icons

Icon sizesIcon colorsAll iconsUpdated icon recommendations

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 full 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

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 which are listed below. PatternFly icons are mostly two dimensional and flat. If none of the PatternFly offered icons fit your use case, you may use any additional ‘fa’ icons within Font Awesome's free set. Simply download your chosen icon's SVG and give the icon proper attribution 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. As mentioned above, if none of these icons fit your use case, you may use any Font Awesome Free icon as long it follows the guidelines above.

If you’re looking to copy HTML for an icon:
Use this for 'pficon' icons: <i className="pf-icon [insert-icon-name]"></i>
Use this for 'fa' solid icons: <i className="fas [insert-icon-name]"></i>
Use this for 'fa' regular icons: <i className="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'

171 items

IconStyleReact
fa-angle-double-leftfasFrameworkAngleDoubleLeftIconIndicates the ability to navigate to the first page of a multi-page data set
fa-angle-double-rightfasFrameworkAngleDoubleRightIconIndicates the ability to navigate to the last page of a multi-page data set
fa-angle-downfasFrameworkAngleDownIconIndicates expandable components such as accordions, progressive disclosures, or expandable lists are currently expanded. Clicking this will collapse the component.
fa-angle-leftfasFrameworkAngleLeftIconIndicates the ability to navigate to the previous page of a multi-page data set
fa-angle-rightfasFrameworkAngleRightIconIndicates 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-upfasFrameworkAngleUpIconIndicates expandable table rows (on mobile) are currently expanded. Clicking this will collapse the component.
ansibleBrandAnsibeTowerIconRepresents "Ansible Tower"
fa-arrow-circle-downfasStatusArrowCircleDownIconRepresents status: an item (such as a VM) is down
fa-arrow-circle-upfasStatusArrowCircleUpIconRepresents status: an item (such as a VM) is up
fa-arrows-alt-vfasFrameworkArrowsAltVIconIndicates the availability of a sorting function in a table header
fa-arrow-rightfasFrameworkArrowRightIconIndicates the ability to take an action or navigate to another page. Is paired with text
fa-balance-scalefasStatusBalanceScaleIconRepresents status: an item needs rebalancing
fa-banfasStatusBanIconRepresents status: an item is disabled, canceled, terminated or is not ready
fa-barsfasFrameworkBarsIconIndicates the ability to collapse a navigation menu
fa-bellfasFramework StatusBellIconIndicates the ability to open a notification drawer. Represents status: default notification
fa-bugfasStatusBugIconRepresents status: there is a bug present
fa-calendar-altfarFrameworkOutlinedCalendarAltIconIndicates a date picker function is available
fa-caret-downfasFrameworkCaretDownIconIndicates the ability to acces option panels for components like drop-downs, filters and page ranges
fa-checkfasAction StatusCheckIcon
fa-check-circlefasStatusCheckCircleIconIndicates the ability to commit edited changes. Also represents status: OK in content views such as a tables
fa-clipboard-checkfasObjectClipboardCheckIconRepresents orders or tasks
fa-clockfarFrameworkOutlinedClockIconRepresents a time interval
fa-codefasObjectCodeIconRepresents code
fa-code-branchfasObjectCodeBranchIconRepresents code branch
fa-cogfasActionCogIconIndicates availability of configurable settings
fa-columnsfasActionColumnsIconIndicates the ability to manage columns for a table view
fa-commentsfarFrameworkOutlinedCommentsIconIndicates availability of commenting
fa-compressfasActionCompressIconIndicates the ability to compress an item. Should toggle with fa-expand
fa-compress-arrows-altfasActionCompressArrowsAltIconIndicates the ability to compress an item (alt concept). Should toggle with fa-expand-arrows-alt
fa-copyfasActionCopyIconIndicates the availability of a copy to clipboard function
fa-cubefasObjectCubeIconRepresents a container
fa-cubesfasObjectCubesIconRepresents a Kubernetes pod(s)
fa-databasefasObjectDatabaseIconRepresents a database
fa-desktopfasObjectDesktopIconRepresents a desktop, workstation or terminal
fa-downloadfasActionDownloadIconIndicates a download function is available
fa-ellipsis-vfasFrameworkEllipsisVIconIndicates a contextual menu of actions or additional actions is available
fa-exclamation-circlefasStatusExclamationCircleIconRepresents alert status: danger, major error or critical error
fa-exclamation-trianglefasStatusExclamationTriangleIconRepresents alert status: warning
fa-expandfasActionExpandIconIndicates the ability to expand an item. Should toggle with fa-compress
fa-expand-arrows-altfasActionExpandArrowsAltIconIndicates the ability to expand an item (alt concept). Should toggle with fa-compress-arrows-alt
fa-external-link-altfasActionExternalLinkAltIconIndicates the link navigates to an external site
fa-filterfasActionFilterIconIndicates the ability to filter search results or datasets
fa-flagfasObject ActionFlagIconRepresents a message Also indicates the ability to access a messages
fa-folderfasFrameworkFolderIconRepresents a collapsed hierarchical group. Indicates the ability to expand the group.
fa-folder-openfasFrameworkFolderOpenIconRepresents an expanded hierarchical group. Indicates the ability to collapse the group.
fa-grip-horizontalfasFrameworkGripHorizontalIconIndicates the ability to move a vertically-oriented component via drag and drop
fa-grip-verticalfasFrameworkGripVerticalIconIndicates the ability to move a horizontally-oriented component via drag and drop
fa-historyfasStatusHistoryIconRepresents status: restarting
fa-undofasActionUndoIconIndicates the ability to undo an a step in a historical log
fa-hddfasObjectOutlinedHddIconRepresents a single node or host
fa-homefasFrameworkHomeIconIndicates a link to a default/home page
fa-info-circlefasStatusInfoCircleIconRepresents alert status: information
fa-keyfasObjectKeyIconRepresents an SSH key or similar security concepts
fa-listfasView TypeListIconRepresents data view content in a list format.
fa-lockfasStatusLockIconRepresents status: locked
fa-lock-openfasStatusLockOpenIconRepresents status: unlocked
fa-long-arrow-alt-downfasFrameworkLongArrowAltDownIconRepresents 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-upfasFrameworkLongArrowAltUpIconRepresents 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-markerfasFrameworkMapMarkerIconRepresents a locale
fa-memoryfasObjectMemoryIconRepresents the memory on a device
fa-microchipfasObjectMicrochipIconRepresents the CPU of a device
fa-minusfasActionMinusIconIndicates the ability to remove an item
fa-minus-circlefasActionMinusCircleIconIndicates the ability to remove an item (alt concept)
fa-pausefasActionPauseIconIndicates the ability to pause. Should toggle with fa-play
fa-pause-circlefasStatusPauseCircleIconRepresents status: an interruption and/or stoppage of a process
fa-pencil-altfasActionPencilAltIconIndicates the ability to edit an item
fa-plusfasActionPlusIconIndicates the ability to add an item; not for creating completely new objects (see pficon-circle-add)
fa-plus-circlefasActionPlusCircleIconIndicates the ability to create an item
pf-icon-add-circle-opf-iconActionAddCircleOIconIndicates 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.
fa-power-offfasStatusPowerOffIconRepresents status: powered on
pf-icon-offpf-iconStatusOffIconRepresents status: powered off
pf-icon-openshiftpf-iconBrandsOpenshiftIconRepresents brand: OpenShift
pf-icon-openstackpf-iconBrandsOpenstackIconRepresents brand: OpenStack
fa-playfasActionPlayIconIndicates the ability to start or resume. Should toggle with fa-pause
fa-printfasActionPrintIconIndicates the availability of a print function
fa-question-circlefarFrameworkOutlinedQuestionCircleIconIndicates the availability of contextual help
fa-question-circlefasFrameworkQuestionCircleIconIndicates the availability of a help system in the masthead
fa-redofasActionRedoIconIndicates the ability to refresh. Please use the animated spinner to indicate that something is “loading” or in the middle of processing
fa-searchfasActionSearchIconIndicates that that user may perform a search
fa-search-minusfasActionSearchMinusIconIndicates the ability to zoom out
fa-search-plusfasActionSearchPlusIconIndicates the ability to zoom in
fa-share-squarefasActionShareSquareIconIndicates the ability to share via various methods with others
fa-sort-amount-downfasActionSortAmountDownIconRepresents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type.
fa-sort-amount-down-altfasActionSortAmountDownAltIconRepresents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type.
fa-sync-altfasActionSyncAltIconIndicates the availability of a sync action
fa-tagfasObjectTagIconIndicates the abiltiy to access or create a set of tags
fa-tablefasView TypeTableIconRepresents data view content in a table format
fa-tachometer-altfasView TypeTachometerAltIconRepresents data view content in a dashboard
fa-thfasView TypeThIconRepresents data view content in a small card format
fa-th-largefasView TypeThLargeIconRepresents data view content in a large card format
fa-thumbtackfasFrameworkThumbtackIconIndicates the ability to pin an item
fa-timesfasActionTimesIconIndicates 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-circlefasActionTimesCircleIconIndicates the ability to close the about modal
fa-trashfasActionTrashIconIndicates the ability to delete
fa-userfasObject FrameworkUserIconRepresents a user (in a dataset, paired with a username). Indicates the availability of a user profile (in the masthead, paired with a username)
fa-usersfasObjectUsersIconRepresents multiple users, a user grouping or project
fa-window-restorefarActionOutlinedWindowRestoreIconIndicates the ability to open link in a new window
fa-wrenchfasStatusWrenchIconRepresents status: in preparation for maintenance
fa-githubfabBrandsGithubIconRepresents brand: GitHub
fa-gitlabfabBrandsGitlabIconRepresents brand: GitLab
fa-googlefabBrandsGoogleIconRepresents brand: Google
fa-stack-overflowfabBrandsStackOverflowIconRepresents brand: Stack Overflow
fa-facebook-squarefabBrandsFacebookSquareIconRepresents brand: Facebook
fa-twitterfabBrandsTwitterIconRepresents brand: Twitter
fa-windowsfabBrandsWindowsIconRepresents brand: Windows
fa-linkedinfabBrandsLinkedinIconRepresents brand: LinkedIn
fa-linuxfabBrandsLinuxIconRepresents brand: Linux
fa-dropboxfabBrandsDropboxIconRepresents brand: Dropbox
fa-drupalfabBrandsDrupalIconRepresents brand: Drupal
fa-jsfabBrandsJsIconRepresents brand: js
pf-icon-asleeppf-iconStatusAsleepIconRepresents an item is asleep or in power suspended mode
pf-icon-automationpf-iconObjectAutomationIconRepresents a process-automation object
pf-icon-blueprintpf-iconObjectBlueprintIconRepresents a blueprint
pf-icon-buildpf-iconObjectBuildIconRepresents a build
pf-icon-builder-imagepf-iconObjectBuilderImageIconRepresents a builder image
pf-icon-bundlepf-iconObjectBundleIconRepresents a package; used in Satellite, Cockpit, and Composer to indicate a generic package or rpm
pf-icon-catalogpf-iconObjectCatalogIconIndicates the availability of a catalog or library
pf-icon-cloud-securitypf-iconObjectCloudSecurityIconRepresents cloud security
pf-icon-cloud-tenantpf-iconObjectCloudTenantIconRepresents a cloud tenant
pf-icon-clusterpf-iconObjectClusterIconRepresents a cluster or server
pf-icon-connectedpf-iconStatusConnectedIconRepresents an item's power is on and is “up”; this is a more active alternative to “pficon-on”
pf-icon-degradedpf-iconStatusDegradedIconVolume replication is degraded
pf-icon-disconnectedpf-iconStatusDisconnectedIconRepresents an item's power is off and is “down”; this is a more active alternative to “pficon-off”
pf-icon-domainpf-iconObjectDomainIconRepresents a domain
pf-icon-enhancementpf-iconStatusEnhancementIconRepresents status: enhancement advisory is present
pf-icon-enterprisepf-iconObjectEnterpriseIconRepresents an enterprise
pf-icon-exportpf-iconActionExportIconIndicates the ability to export a file or other data
pf-icon-flavorpf-iconObjectFlavorIconRepresents a flavor
pf-icon-imagepf-iconObjectImageIconRepresents an image
pf-icon-importpf-iconActionImportIconIndicates the ability to import a file or other data
pf-icon-in-progresspf-iconStatusInProgressIconRepresents running a determinite action
pf-icon-infrastructurepf-iconObjectInfrastructureIconRepresents an infrastructure
pf-icon-integrationpf-iconObjectIntegrationIconRepresents an integration of two or more objects
pf-icon-migrationpf-iconStatusMigrationIconRepresents an item such as a VM is currently migrating
pf-icon-middlewarepf-iconObjectMiddlewareIconRepresents middleware
pf-icon-monitoringpf-iconObjectMonitoringIconRepresents monitoring
pf-icon-networkpf-iconObjectNetworkIconRepresents network
pf-icon-network-rangepf-iconObjectPficonNetworkRangeIconRepresents network range
pficon-on-runningpf-iconStatusOnRunningIconRepresents status: an item is running or active
pf-icon-optimizepf-iconActionOptimizeIconIndicates the ability to optimize an item or a process
pf-icon-pendingpf-iconStatusPendingIconRepresents status: pending; currently waiting on contingencies
pf-icon-privatepf-iconStatusPrivateIconRepresents status: private; cannot access with current credentials
pf-icon-portpf-iconObjectPortIconRepresents a port or route
pf-icon-process-automationpf-iconObjectProcessAutomationIconRepresents process automation
pf-icon-regionspf-iconObjectRegionsIconRepresents a region
pf-icon-registrypf-iconObjectRegistryIconRepresents a registry
pf-icon-replicatorpf-iconObjectReplicatorIconRepresents a replicator
pf-icon-repositorypf-iconObjectRepositoryIconRepresents a repository
pf-icon-resource-poolpf-iconObjectResourcePoolIconRepresents a resource pool
pf-icon-resources-almost-emptypf-iconStatusResourcesAlmostEmptyIconRepresents status: almost empty
pf-icon-resources-almost-fullpf-iconStatusResourcesAlmostFullIconRepresents status: is almost full
pf-icon-resources-fullpf-iconStatusResourcesFullIconRepresents status: is full
pf-icon-routepf-iconObjectRouteIconRepresents a route
pf-icon-satellitepf-iconBrandsPficonSatelliteIconRepresents brand: Satellite
pf-icon-savepf-iconActionSaveIconIndicates the ability to save a file or other object
pf-icon-securitypf-iconStatusSecurityIconRepresents status: security advisory is present
pf-icon-server-grouppf-iconObjectServerGroupIconRepresents a server group
pf-icon-servicepf-iconObjectServiceIconRepresents a Kubernetes service
pf-icon-servicespf-iconObjectServicesIconRepresents services
pf-icon-service-catalogpf-iconObjectServiceCatalogIconIndicates availability of a catalog/library to browse
pf-icon-storage-domainpf-iconObjectStorageDomainIconIndicates a storage domain
pf-icon-templatepf-iconObjectPficonTemplateIconRepresents a template; includes contents or instructions used to generate one or more instances of a final output
pf-icon-tenantpf-iconObjectTenantIconRepresents a tenant
pf-icon-topologypf-iconView typeTopologyIconRepresents data view content in a topology format
pf-icon-trend-downpf-iconStatusTrendDownIconRepresents status: downward trend
pf-icon-trend-uppf-iconStatusTrendUpIconRepresents status: upward trend
pf-icon-unknownpf-iconStatusUnknownIconRepresents status: unknown
pf-icon-vcenterpf-iconObjectPficonVcenterIconRepresents a vcenter
pf-icon-virtual-machinepf-iconObjectVirtualMachineIconRepresents a virtual machine
pf-icon-volumepf-iconObjectVolumeIconRepresents a volume
pf-icon-zonepf-iconObjectZoneIconRepresents 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.

61 items

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 iconfa-arrow-circle-o-down
fa-arrow-circle-down
Represents status: an item (such as a VM) is down
fa-arrow-circle-o-up iconfa-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 iconfa-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 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.
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 iconpficon-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 iconpf-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 iconpficon-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 iconpficon-search
fa-search
Indicates that that user may perform a search
Sync
fa-sync-alt
Indicates the availability of a sync action
fa-table iconfa-table
fa-table
Represents data view content in a table format
fa-tachometer iconfa-tachometer
fa-tachometer-alt
Indicates the availability of a dashboard view
fa-th iconfa-th
fa-th
Represents data view content in a small card format
fa-th-large iconfa-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
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