Skip to content

chore(icons): update to rh icons - #8336

Merged
mcoker merged 29 commits into
patternfly:mainfrom
jcmill:fix/8127-hr-icons
Aug 3, 2026
Merged

chore(icons): update to rh icons#8336
mcoker merged 29 commits into
patternfly:mainfrom
jcmill:fix/8127-hr-icons

Conversation

@jcmill

@jcmill jcmill commented Apr 27, 2026

Copy link
Copy Markdown
Contributor

Closes #8127

Updates/aligns component examples and partials with Red Hat ui icons.

Summary by CodeRabbit

  • Style
    • Updated icon rendering across the UI: badges, code editor tabs, data lists, description lists, dual-list selector, empty states, form controls, helper text, input groups, labels, lists, login example, menus, file uploads, navigation, number inputs, progress steppers, switches, tables, text input groups, tree views, and wizards — providing a consistent, refreshed icon appearance across components.

@jcmill
jcmill requested review from mcoker and nicolethoen April 27, 2026 17:10
@coderabbitai

coderabbitai Bot commented Apr 27, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

Replaced hardcoded Font Awesome <i> markup across many Handlebars templates and documentation examples with the PatternFly pfIcon helper using corresponding rh-ui-* icon identifiers; component/control structure and conditional logic were preserved.

Changes

Cohort / File(s) Summary
Badge & Toggles
src/patternfly/components/Badge/badge-icon.hbs, src/patternfly/components/FormControl/form-control-select.hbs, src/patternfly/components/Menu/templates/menu-breadcrumbs--dropdown.hbs, src/patternfly/components/Switch/switch-toggle-icon.hbs, src/patternfly/components/Wizard/wizard-toggle-icon.hbs
Replaced hardcoded caret/toggle <i> icons with {{pfIcon "rh-ui-caret-down-fill"}} / pfIcon helper calls.
CodeEditor & Examples
src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs, src/patternfly/components/CodeEditor/examples/CodeEditor.md
Replaced inline fa-code markup with {{pfIcon "rh-ui-code"}}.
Data / Description Lists
src/patternfly/components/DataList/data-list-item-draggable-icon.hbs, src/patternfly/components/DataList/examples/DataList.md, src/patternfly/components/DescriptionList/description-list__example-with-icons.hbs
Swapped Font Awesome grip/branch and description-list icons for pfIcon calls (rh-ui-*).
Form & Input Controls
src/patternfly/components/FormControl/form-control-icon.hbs, src/patternfly/components/InputGroup/input-group-text.hbs, src/patternfly/components/NumberInput/number-input-icon.hbs, src/patternfly/components/TextInputGroup/text-input-group-icon.hbs
Replaced computed/raw <i> markup with pfIcon helper; some cases use literal characters ($, @) and explicit rh-ui-* icon choices for plus/minus.
Menu, Nav & List Items
src/patternfly/components/Menu/menu-item-action-icon.hbs, src/patternfly/components/Menu/menu-list-item.hbs, src/patternfly/components/Nav/nav-link-icon.hbs, src/patternfly/components/Menu/examples/Menu.md
Replaced hardcoded action/list/nav icons with {{pfIcon ...}}, switching to rh-ui-* identifiers.
Status & Progress
src/patternfly/components/Label/label-icon--map.hbs, src/patternfly/components/Label/label-icon.hbs, src/patternfly/components/HelperText/helper-text-item-icon.hbs, src/patternfly/components/ProgressStepper/progress-stepper-step-icon.hbs, src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs, src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs
Converted status icons from ternary/computed <i> classes to explicit {{pfIcon ...}} branches using rh-ui-* status icons.
Files, Uploads & Tree/Folder
src/patternfly/components/EmptyState/empty-state-icon.hbs, src/patternfly/components/MultipleFileUpload/*, src/patternfly/components/Table/Tree-table/table-tr--tree.hbs, src/patternfly/components/TreeView/tree-view-node-icon.hbs
Swapped file/folder/upload icons to pfIcon (rh-ui-*) and updated empty-state default icon.
List & Table Examples
src/patternfly/components/List/examples/List.md, src/patternfly/components/Table/examples/Table.md
Replaced numerous example inline <i class="fas ..."> icons with {{pfIcon "rh-ui-..."}} calls.
Miscellaneous
src/patternfly/components/DualListSelector/dual-list-selector--actions.hbs, src/patternfly/components/Login/examples/Login.md
Updated Sort icon ID to rh-ui-sort-down-large-to-small; replaced login helper text icon with {{pfIcon "rh-ui-error"}}.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20-25 minutes

Possibly related issues

Possibly related PRs

Suggested labels

released on @prerelease``

Suggested reviewers

  • mcoker
  • srambach
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The pull request successfully addresses all coding requirements from issue #8127 by replacing non-RH icons with RH UI icons across all specified components and documentation files.
Out of Scope Changes check ✅ Passed All changes are directly within scope of the linked issue #8127, focusing exclusively on replacing Font Awesome and other non-RH icons with RH UI icons across components.
Title check ✅ Passed The title uses a valid conventional commit format and accurately summarizes the RH icon update.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@patternfly-build

patternfly-build commented Apr 27, 2026

Copy link
Copy Markdown
Collaborator

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

🧹 Nitpick comments (1)
src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs (1)

5-5: Consider using an animated spinner for active uploads to match FileUpload patterns.

Other file upload components in the codebase (e.g., file-upload-file-details.hbs) use an animated spinner partial for in-progress states, while this component uses a static rh-ui-in-progress icon. The ProgressStepper component also maintains this distinction—IsInProgressAnimate uses {{#> spinner}} while IsInProgressAlt uses the static icon. For an actively uploading file, consider whether an animated spinner would better communicate the in-flight state:

♻️ Possible alternative using the spinner partial
-  {{pfIcon "rh-ui-in-progress"}}
+  {{#> spinner spinner--modifier="pf-m-md"}}Uploading{{/spinner}}

If the static icon is the intended design direction for this component, this can be disregarded.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs`
at line 5, The template
MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs currently
renders a static icon via {{pfIcon "rh-ui-in-progress"}} for active uploads; to
match other components (e.g., file-upload-file-details.hbs) and the
ProgressStepper's IsInProgressAnimate, replace the static icon with the animated
spinner partial (use the {{#> spinner}} partial or the same spinner invocation
used elsewhere) when the file is actively uploading (mirror the logic from
IsInProgressAnimate/IsInProgressAlt if needed), or if the static icon is
intentional, add a comment documenting that choice so future reviewers know it
was deliberate.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/DualListSelector/dual-list-selector--actions.hbs`:
- Line 6: The template uses a new icon identifier
"rh-ui-sort-down-large-to-small" via the pfIcon helper which isn't defined in
the icon library and migration is incomplete (old "sort-amount-down" still used
elsewhere); confirm the new icon exists or revert to the existing
"sort-amount-down" identifier, and update all templates consistently (search for
pfIcon usages and replace or add the new identifier). If adding the new icon,
register it in the icon definitions/manifest with the
"rh-ui-sort-down-large-to-small" key and ensure build assets include it; if
reverting, replace the pfIcon call in dual-list-selector--actions.hbs to use
"sort-amount-down" and align other templates (e.g., toolbar-template.hbs) to the
same identifier.

In `@src/patternfly/components/FormControl/form-control-icon.hbs`:
- Line 5: Status and generic icons are using non‑RH names and form-control.hbs
contains redundant hardcoded branches; update form-control-template-status.hbs
to use RH names (rh-ui-check-circle-fill, rh-ui-warning-fill, rh-ui-error-fill)
instead of "check-circle"/"exclamation-triangle"/"exclamation-circle"; verify
and replace generic icons passed via form-control--HasIcon (e.g., "calendar",
"clock", "bell" in FormControl.md) with the proper RH/react‑icons equivalents or
change callers to pass RH names so pfIcon can resolve them; remove the hardcoded
clock/calendar-alt checks and routing in form-control.hbs (the branch that
checks form-control--HasIcon == "clock" or "calendar-alt") so pfIcon is the
single source of truth for rendering icons.

In `@src/patternfly/components/InputGroup/input-group-text.hbs`:
- Around line 16-21: The template currently renders raw "$" and "@" text nodes
inside the input-group text (conditionals input-group-text--HasDollarSignIcon
and input-group-text--HasAtIcon), which will be announced by screen readers; to
preserve the previous decorative behavior wrap those glyphs in an element with
aria-hidden="true" (e.g., replace the bare text inside the input-group__text
output with a span or i element that has aria-hidden="true") so AT ignores them,
or alternatively keep them as bare text only if they are semantically
meaningful; update the branches for input-group-text--HasDollarSignIcon and
input-group-text--HasAtIcon to render an aria-hidden wrapper accordingly.

In `@src/patternfly/components/Label/label-icon--map.hbs`:
- Around line 1-2: Demo call sites are still passing legacy icon names into the
label component (it reads label-icon--value and renders via pfIcon) which
bypasses the component's rh-ui-* fallback mapping; update the demo templates
that call this component (e.g., card-demo--notification-drawer.hbs and
card-template-status.hbs) to replace the legacy names with the rh-ui-*
equivalents: "check-circle" → "rh-ui-check-circle-fill", "info-circle" →
"rh-ui-information-fill", "bell" → "rh-ui-notification-fill",
"exclamation-circle" → "rh-ui-error-fill", "exclamation-triangle" →
"rh-ui-warning-fill"; for "cube" verify whether an rh-ui-* counterpart exists
and if not switch that demo to rely on the component's status-based fallback
mapping instead.

In `@src/patternfly/components/Login/examples/Login.md`:
- Line 142: Remove the accidental literal "test" that follows the helper icon
call in the Login example; locate the template fragment containing the
helper/icon invocation {{pfIcon "rh-ui-error"}} in Login.md and delete the stray
"test" text (and any unintended whitespace) so only the icon helper renders in
the example.

In
`@src/patternfly/components/MultipleFileUpload/multiple-file-upload-title-icon.hbs`:
- Line 5: The title icon call using the pfIcon helper is passing a non-existent
icon name "rh-ui-server-upload-fill" which causes the helper to render a
missing-icon comment; update the pfIcon invocation to use a valid icon from
`@patternfly/react-icons` (e.g., find the correct server/upload icon name or an
existing "rh-ui-*" variant) or replace the string with an available icon name,
and optionally add a safe fallback (e.g., a known icon name) where pfIcon is
called so the title always renders; locate the pfIcon usage in the
MultipleFileUpload title (the pfIcon helper call) and correct the icon
identifier accordingly.

In `@src/patternfly/components/Nav/nav-link-icon.hbs`:
- Around line 5-9: Callers still pass Font Awesome suffixes to the
nav-link--icon parameter but pfIcon expects full Red Hat icon identifiers;
update every use of nav-link--icon (e.g., in the Masthead demo and Navigation
examples) to pass the full RH names that pfIcon will resolve (for example
replace "cube", "folder", "cloud", "code", "home" etc. with their corresponding
rh-... identifiers such as
rh-ui-cube/rh-ui-folder/rh-ui-cloud/rh-ui-code/rh-ui-home as appropriate),
ensuring each template/example that calls {{pfIcon nav-link--icon}} provides the
full icon name so pfIcon can load the correct SVG.

---

Nitpick comments:
In
`@src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs`:
- Line 5: The template
MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs currently
renders a static icon via {{pfIcon "rh-ui-in-progress"}} for active uploads; to
match other components (e.g., file-upload-file-details.hbs) and the
ProgressStepper's IsInProgressAnimate, replace the static icon with the animated
spinner partial (use the {{#> spinner}} partial or the same spinner invocation
used elsewhere) when the file is actively uploading (mirror the logic from
IsInProgressAnimate/IsInProgressAlt if needed), or if the static icon is
intentional, add a comment documenting that choice so future reviewers know it
was deliberate.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 29d26706-289a-4aa8-8291-6735481572d2

📥 Commits

Reviewing files that changed from the base of the PR and between e60f589 and 5becd29.

📒 Files selected for processing (35)
  • src/patternfly/components/Badge/badge-icon.hbs
  • src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs
  • src/patternfly/components/CodeEditor/examples/CodeEditor.md
  • src/patternfly/components/DataList/data-list-item-draggable-icon.hbs
  • src/patternfly/components/DataList/examples/DataList.md
  • src/patternfly/components/DescriptionList/description-list__example-with-icons.hbs
  • src/patternfly/components/DualListSelector/dual-list-selector--actions.hbs
  • src/patternfly/components/EmptyState/empty-state-icon.hbs
  • src/patternfly/components/FormControl/form-control-icon.hbs
  • src/patternfly/components/FormControl/form-control-select.hbs
  • src/patternfly/components/HelperText/helper-text-item-icon.hbs
  • src/patternfly/components/Icon/examples/Icon.md
  • src/patternfly/components/InputGroup/input-group-text.hbs
  • src/patternfly/components/Label/label-icon--map.hbs
  • src/patternfly/components/Label/label-icon.hbs
  • src/patternfly/components/List/examples/List.md
  • src/patternfly/components/Login/examples/Login.md
  • src/patternfly/components/Menu/examples/Menu.md
  • src/patternfly/components/Menu/menu-item-action-icon.hbs
  • src/patternfly/components/Menu/menu-list-item.hbs
  • src/patternfly/components/Menu/templates/menu-breadcrumbs--dropdown.hbs
  • src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-item-icon.hbs
  • src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs
  • src/patternfly/components/MultipleFileUpload/multiple-file-upload-title-icon.hbs
  • src/patternfly/components/Nav/nav-link-icon.hbs
  • src/patternfly/components/NumberInput/number-input-icon.hbs
  • src/patternfly/components/ProgressStepper/progress-stepper-step-icon.hbs
  • src/patternfly/components/Switch/switch-toggle-icon.hbs
  • src/patternfly/components/Table/Tree-table/table-tr--tree.hbs
  • src/patternfly/components/Table/examples/Table.md
  • src/patternfly/components/TextInputGroup/text-input-group-icon.hbs
  • src/patternfly/components/TreeView/tree-view-node-icon.hbs
  • src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs
  • src/patternfly/components/Wizard/wizard-toggle-icon.hbs
  • src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs

Comment thread src/patternfly/components/FormControl/form-control-icon.hbs
Comment thread src/patternfly/components/InputGroup/input-group-text.hbs
Comment thread src/patternfly/components/Label/label-icon--map.hbs
Comment thread src/patternfly/components/Login/examples/Login.md Outdated
Comment thread src/patternfly/components/Nav/nav-link-icon.hbs
@jcmill
jcmill force-pushed the fix/8127-hr-icons branch from 2366f90 to 3259afd Compare May 20, 2026 13:45
@jcmill
jcmill requested a review from andrew-ronaldson May 20, 2026 13:46
@jcmill
jcmill requested a review from lboehling June 25, 2026 17:37
@jcmill jcmill changed the title fix(icons): update to rh icons chore(icons): update to rh icons Jun 25, 2026
@phcox
phcox requested a review from bekah-stephens July 27, 2026 15:06
@phcox

phcox commented Jul 27, 2026

Copy link
Copy Markdown

I added @bekah-stephens as a reviewer - of all the PF designers, she's been the closest to the process and can probably handle this fairly quickly.

Comment thread src/patternfly/components/CodeEditor/examples/CodeEditor.md
Comment thread src/patternfly/components/EmptyState/empty-state-icon.hbs
Comment thread src/patternfly/components/FormControl/examples/FormControl.md
Comment thread src/patternfly/components/InputGroup/input-group-text.hbs
Comment thread src/patternfly/components/Label/label-icon--map.hbs
Comment thread src/patternfly/components/Login/examples/Login.md
Comment thread src/patternfly/components/NumberInput/number-input-icon.hbs
Comment thread src/patternfly/components/TextInputGroup/text-input-group-icon.hbs
Comment thread src/patternfly/components/TreeView/tree-view-node-icon.hbs

@bekah-stephens bekah-stephens left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left several comments about icons I noticed still needed to be updated, but if they're being addressed in a separate PR, just disregard!

@jcmill
jcmill force-pushed the fix/8127-hr-icons branch from 3259afd to 329da2a Compare July 29, 2026 15:17
@jcmill
jcmill requested a review from bekah-stephens July 29, 2026 15:28

@bekah-stephens bekah-stephens left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noticed a few things left to update!

@jcmill
jcmill requested a review from bekah-stephens July 29, 2026 18:20

@bekah-stephens bekah-stephens left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! ✨

@mcoker

mcoker commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

@bekah-stephens or anyone else, would you like to see a visual regression report that would show the before/after for all of these icon updates? Or is that not necessary?

@bekah-stephens

Copy link
Copy Markdown

@bekah-stephens or anyone else, would you like to see a visual regression report that would show the before/after for all of these icon updates? Or is that not necessary?

it could help in case I missed anything!

@nicolethoen nicolethoen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mcoker

mcoker commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

@bekah-stephens here's the report. If the PDF is hard to read, you can open the full report and see full size images in your browser.

  • PDF report
  • Full report - Unzip, open "backstop_data" -> "html_report" -> "index.html". Should open in your browser.

@mcoker
mcoker merged commit d51e1f2 into patternfly:main Aug 3, 2026
6 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.6.0-prerelease.28 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update icons to RH brand icons [core docs]

7 participants