@patternfly/patternfly 6.5.0-prerelease.66 → 6.5.0-prerelease.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/components/Accordion/accordion.css +1 -2
  2. package/components/Accordion/accordion.scss +2 -2
  3. package/components/DataList/data-list.css +1 -1
  4. package/components/DataList/data-list.scss +2 -2
  5. package/components/Drawer/drawer.css +3 -5
  6. package/components/Drawer/drawer.scss +7 -9
  7. package/components/Page/page.css +11 -11
  8. package/components/Page/page.scss +2 -2
  9. package/components/Table/table.css +1 -2
  10. package/components/Table/table.scss +2 -2
  11. package/components/Wizard/wizard.css +2 -2
  12. package/components/Wizard/wizard.scss +4 -4
  13. package/components/_index.css +19 -23
  14. package/docs/components/ActionList/examples/ActionList.md +2 -2
  15. package/docs/components/Alert/examples/Alert.md +4 -4
  16. package/docs/components/Button/examples/Button.md +1 -1
  17. package/docs/components/Icon/examples/Icon.md +13 -1
  18. package/docs/components/Menu/examples/Menu.md +26 -2
  19. package/docs/components/MenuToggle/examples/MenuToggle.md +172 -64
  20. package/docs/components/Toolbar/examples/Toolbar.md +67 -7
  21. package/docs/components/TreeView/examples/TreeView.md +4 -4
  22. package/docs/components/Wizard/examples/Wizard.md +1 -1
  23. package/docs/demos/AboutModal/examples/AboutModal.md +23 -15
  24. package/docs/demos/Alert/examples/Alert.md +69 -45
  25. package/docs/demos/BackToTop/examples/BackToTop.md +23 -15
  26. package/docs/demos/Banner/examples/Banner.md +46 -30
  27. package/docs/demos/CardView/examples/CardView.md +36 -16
  28. package/docs/demos/Compass/examples/Compass.md +76 -19
  29. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  30. package/docs/demos/DataList/examples/DataList.md +157 -65
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +69 -45
  32. package/docs/demos/Drawer/examples/Drawer.md +115 -75
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +138 -90
  34. package/docs/demos/Masthead/examples/Masthead.md +101 -21
  35. package/docs/demos/Modal/examples/Modal.md +138 -90
  36. package/docs/demos/Nav/examples/Nav.md +188 -120
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +115 -75
  38. package/docs/demos/Page/examples/Page.md +361 -213
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +265 -113
  40. package/docs/demos/Skeleton/examples/Skeleton.md +23 -15
  41. package/docs/demos/Table/examples/Table.md +711 -271
  42. package/docs/demos/Tabs/examples/Tabs.md +151 -91
  43. package/docs/demos/Toolbar/examples/Toolbar.md +124 -36
  44. package/docs/demos/Wizard/examples/Wizard.md +207 -135
  45. package/package.json +1 -1
  46. package/patternfly-no-globals.css +19 -23
  47. package/patternfly.css +19 -23
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
@@ -189,7 +189,19 @@ cssPrefix: pf-v6-c-menu-toggle
189
189
  aria-expanded="false"
190
190
  >
191
191
  <span class="pf-v6-c-menu-toggle__icon">
192
- <i class="fas fa-cog" aria-hidden="true"></i>
192
+ <svg
193
+ class="pf-v6-svg"
194
+ viewBox="0 0 32 32"
195
+ fill="currentColor"
196
+ aria-hidden="true"
197
+ role="img"
198
+ width="1em"
199
+ height="1em"
200
+ >
201
+ <path
202
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
203
+ />
204
+ </svg>
193
205
  </span>
194
206
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
195
207
  <span class="pf-v6-c-menu-toggle__controls">
@@ -301,7 +313,19 @@ cssPrefix: pf-v6-c-menu-toggle
301
313
  aria-expanded="false"
302
314
  >
303
315
  <span class="pf-v6-c-menu-toggle__icon">
304
- <i class="fas fa-cog" aria-hidden="true"></i>
316
+ <svg
317
+ class="pf-v6-svg"
318
+ viewBox="0 0 32 32"
319
+ fill="currentColor"
320
+ aria-hidden="true"
321
+ role="img"
322
+ width="1em"
323
+ height="1em"
324
+ >
325
+ <path
326
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
327
+ />
328
+ </svg>
305
329
  </span>
306
330
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
307
331
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1003,7 +1027,19 @@ cssPrefix: pf-v6-c-menu-toggle
1003
1027
  aria-expanded="false"
1004
1028
  >
1005
1029
  <span class="pf-v6-c-menu-toggle__icon">
1006
- <i class="fas fa-cog" aria-hidden="true"></i>
1030
+ <svg
1031
+ class="pf-v6-svg"
1032
+ viewBox="0 0 32 32"
1033
+ fill="currentColor"
1034
+ aria-hidden="true"
1035
+ role="img"
1036
+ width="1em"
1037
+ height="1em"
1038
+ >
1039
+ <path
1040
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1041
+ />
1042
+ </svg>
1007
1043
  </span>
1008
1044
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1009
1045
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1033,7 +1069,19 @@ cssPrefix: pf-v6-c-menu-toggle
1033
1069
  disabled
1034
1070
  >
1035
1071
  <span class="pf-v6-c-menu-toggle__icon">
1036
- <i class="fas fa-cog" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 32 32"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1083
+ />
1084
+ </svg>
1037
1085
  </span>
1038
1086
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1039
1087
  <span class="pf-v6-c-menu-toggle__controls">
@@ -2979,7 +3027,19 @@ Shown with default, primary, and secondary styling
2979
3027
  aria-label="Menu toggle"
2980
3028
  >
2981
3029
  <span class="pf-v6-c-menu-toggle__icon">
2982
- <i class="fas fa-cog" aria-hidden="true"></i>
3030
+ <svg
3031
+ class="pf-v6-svg"
3032
+ viewBox="0 0 32 32"
3033
+ fill="currentColor"
3034
+ aria-hidden="true"
3035
+ role="img"
3036
+ width="1em"
3037
+ height="1em"
3038
+ >
3039
+ <path
3040
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3041
+ />
3042
+ </svg>
2983
3043
  </span>
2984
3044
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2985
3045
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3022,7 +3082,19 @@ Shown with default, primary, and secondary styling
3022
3082
  aria-label="Menu toggle"
3023
3083
  >
3024
3084
  <span class="pf-v6-c-menu-toggle__icon">
3025
- <i class="fas fa-cog" aria-hidden="true"></i>
3085
+ <svg
3086
+ class="pf-v6-svg"
3087
+ viewBox="0 0 32 32"
3088
+ fill="currentColor"
3089
+ aria-hidden="true"
3090
+ role="img"
3091
+ width="1em"
3092
+ height="1em"
3093
+ >
3094
+ <path
3095
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3096
+ />
3097
+ </svg>
3026
3098
  </span>
3027
3099
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3028
3100
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3067,7 +3139,19 @@ Shown with default, primary, and secondary styling
3067
3139
  disabled
3068
3140
  >
3069
3141
  <span class="pf-v6-c-menu-toggle__icon">
3070
- <i class="fas fa-cog" aria-hidden="true"></i>
3142
+ <svg
3143
+ class="pf-v6-svg"
3144
+ viewBox="0 0 32 32"
3145
+ fill="currentColor"
3146
+ aria-hidden="true"
3147
+ role="img"
3148
+ width="1em"
3149
+ height="1em"
3150
+ >
3151
+ <path
3152
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3153
+ />
3154
+ </svg>
3071
3155
  </span>
3072
3156
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3073
3157
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3114,7 +3198,19 @@ Shown with default, primary, and secondary styling
3114
3198
  aria-label="Menu toggle"
3115
3199
  >
3116
3200
  <span class="pf-v6-c-menu-toggle__icon">
3117
- <i class="fas fa-cog" aria-hidden="true"></i>
3201
+ <svg
3202
+ class="pf-v6-svg"
3203
+ viewBox="0 0 32 32"
3204
+ fill="currentColor"
3205
+ aria-hidden="true"
3206
+ role="img"
3207
+ width="1em"
3208
+ height="1em"
3209
+ >
3210
+ <path
3211
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3212
+ />
3213
+ </svg>
3118
3214
  </span>
3119
3215
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3120
3216
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3157,7 +3253,19 @@ Shown with default, primary, and secondary styling
3157
3253
  aria-label="Menu toggle"
3158
3254
  >
3159
3255
  <span class="pf-v6-c-menu-toggle__icon">
3160
- <i class="fas fa-cog" aria-hidden="true"></i>
3256
+ <svg
3257
+ class="pf-v6-svg"
3258
+ viewBox="0 0 32 32"
3259
+ fill="currentColor"
3260
+ aria-hidden="true"
3261
+ role="img"
3262
+ width="1em"
3263
+ height="1em"
3264
+ >
3265
+ <path
3266
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3267
+ />
3268
+ </svg>
3161
3269
  </span>
3162
3270
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3163
3271
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3202,7 +3310,19 @@ Shown with default, primary, and secondary styling
3202
3310
  disabled
3203
3311
  >
3204
3312
  <span class="pf-v6-c-menu-toggle__icon">
3205
- <i class="fas fa-cog" aria-hidden="true"></i>
3313
+ <svg
3314
+ class="pf-v6-svg"
3315
+ viewBox="0 0 32 32"
3316
+ fill="currentColor"
3317
+ aria-hidden="true"
3318
+ role="img"
3319
+ width="1em"
3320
+ height="1em"
3321
+ >
3322
+ <path
3323
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3324
+ />
3325
+ </svg>
3206
3326
  </span>
3207
3327
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3208
3328
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3249,7 +3369,19 @@ Shown with default, primary, and secondary styling
3249
3369
  aria-label="Menu toggle"
3250
3370
  >
3251
3371
  <span class="pf-v6-c-menu-toggle__icon">
3252
- <i class="fas fa-cog" aria-hidden="true"></i>
3372
+ <svg
3373
+ class="pf-v6-svg"
3374
+ viewBox="0 0 32 32"
3375
+ fill="currentColor"
3376
+ aria-hidden="true"
3377
+ role="img"
3378
+ width="1em"
3379
+ height="1em"
3380
+ >
3381
+ <path
3382
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3383
+ />
3384
+ </svg>
3253
3385
  </span>
3254
3386
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3255
3387
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3292,7 +3424,19 @@ Shown with default, primary, and secondary styling
3292
3424
  aria-label="Menu toggle"
3293
3425
  >
3294
3426
  <span class="pf-v6-c-menu-toggle__icon">
3295
- <i class="fas fa-cog" aria-hidden="true"></i>
3427
+ <svg
3428
+ class="pf-v6-svg"
3429
+ viewBox="0 0 32 32"
3430
+ fill="currentColor"
3431
+ aria-hidden="true"
3432
+ role="img"
3433
+ width="1em"
3434
+ height="1em"
3435
+ >
3436
+ <path
3437
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3438
+ />
3439
+ </svg>
3296
3440
  </span>
3297
3441
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3298
3442
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3337,7 +3481,19 @@ Shown with default, primary, and secondary styling
3337
3481
  disabled
3338
3482
  >
3339
3483
  <span class="pf-v6-c-menu-toggle__icon">
3340
- <i class="fas fa-cog" aria-hidden="true"></i>
3484
+ <svg
3485
+ class="pf-v6-svg"
3486
+ viewBox="0 0 32 32"
3487
+ fill="currentColor"
3488
+ aria-hidden="true"
3489
+ role="img"
3490
+ width="1em"
3491
+ height="1em"
3492
+ >
3493
+ <path
3494
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3495
+ />
3496
+ </svg>
3341
3497
  </span>
3342
3498
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
3343
3499
  <span class="pf-v6-c-menu-toggle__controls">
@@ -3370,46 +3526,14 @@ Shown with default, primary, and secondary styling
3370
3526
  type="button"
3371
3527
  aria-expanded="false"
3372
3528
  aria-label="Settings"
3373
- >
3374
- <span class="pf-v6-c-menu-toggle__icon">
3375
- <svg
3376
- class="pf-v6-svg"
3377
- viewBox="0 0 32 32"
3378
- fill="currentColor"
3379
- aria-hidden="true"
3380
- role="img"
3381
- width="1em"
3382
- height="1em"
3383
- >
3384
- <path
3385
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3386
- />
3387
- </svg>
3388
- </span>
3389
- </button>
3529
+ ></button>
3390
3530
 
3391
3531
  <button
3392
3532
  class="pf-v6-c-menu-toggle pf-m-settings pf-m-expanded pf-m-plain"
3393
3533
  type="button"
3394
3534
  aria-expanded="true"
3395
3535
  aria-label="Settings"
3396
- >
3397
- <span class="pf-v6-c-menu-toggle__icon">
3398
- <svg
3399
- class="pf-v6-svg"
3400
- viewBox="0 0 32 32"
3401
- fill="currentColor"
3402
- aria-hidden="true"
3403
- role="img"
3404
- width="1em"
3405
- height="1em"
3406
- >
3407
- <path
3408
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3409
- />
3410
- </svg>
3411
- </span>
3412
- </button>
3536
+ ></button>
3413
3537
 
3414
3538
  <button
3415
3539
  class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain pf-m-disabled"
@@ -3417,23 +3541,7 @@ Shown with default, primary, and secondary styling
3417
3541
  aria-expanded="false"
3418
3542
  disabled
3419
3543
  aria-label="Settings"
3420
- >
3421
- <span class="pf-v6-c-menu-toggle__icon">
3422
- <svg
3423
- class="pf-v6-svg"
3424
- viewBox="0 0 32 32"
3425
- fill="currentColor"
3426
- aria-hidden="true"
3427
- role="img"
3428
- width="1em"
3429
- height="1em"
3430
- >
3431
- <path
3432
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3433
- />
3434
- </svg>
3435
- </span>
3436
- </button>
3544
+ ></button>
3437
3545
 
3438
3546
  ```
3439
3547
 
@@ -424,7 +424,7 @@ Several components in the following examples do not include functional and/or ac
424
424
  <span class="pf-v6-c-button__icon">
425
425
  <svg
426
426
  class="pf-v6-svg"
427
- viewBox="0 0 512 512"
427
+ viewBox="0 0 32 32"
428
428
  fill="currentColor"
429
429
  aria-hidden="true"
430
430
  role="img"
@@ -432,7 +432,7 @@ Several components in the following examples do not include functional and/or ac
432
432
  height="1em"
433
433
  >
434
434
  <path
435
- d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
435
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
436
436
  />
437
437
  </svg>
438
438
  </span>
@@ -752,7 +752,19 @@ Several components in the following examples do not include functional and/or ac
752
752
  aria-controls="toolbar-toggle-group-on-mobile-expandable-content"
753
753
  >
754
754
  <span class="pf-v6-c-menu-toggle__icon">
755
- <i class="fas fa-filter" aria-hidden="true"></i>
755
+ <svg
756
+ class="pf-v6-svg"
757
+ viewBox="0 0 512 512"
758
+ fill="currentColor"
759
+ aria-hidden="true"
760
+ role="img"
761
+ width="1em"
762
+ height="1em"
763
+ >
764
+ <path
765
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
766
+ />
767
+ </svg>
756
768
  </span>
757
769
  </button>
758
770
  </div>
@@ -1005,7 +1017,19 @@ Several components in the following examples do not include functional and/or ac
1005
1017
  aria-controls="toolbar-toggle-group-desktop-expandable-content"
1006
1018
  >
1007
1019
  <span class="pf-v6-c-menu-toggle__icon">
1008
- <i class="fas fa-filter" aria-hidden="true"></i>
1020
+ <svg
1021
+ class="pf-v6-svg"
1022
+ viewBox="0 0 512 512"
1023
+ fill="currentColor"
1024
+ aria-hidden="true"
1025
+ role="img"
1026
+ width="1em"
1027
+ height="1em"
1028
+ >
1029
+ <path
1030
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
1031
+ />
1032
+ </svg>
1009
1033
  </span>
1010
1034
  </button>
1011
1035
  </div>
@@ -1343,7 +1367,19 @@ Several components in the following examples do not include functional and/or ac
1343
1367
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
1344
1368
  >
1345
1369
  <span class="pf-v6-c-menu-toggle__icon">
1346
- <i class="fas fa-filter" aria-hidden="true"></i>
1370
+ <svg
1371
+ class="pf-v6-svg"
1372
+ viewBox="0 0 512 512"
1373
+ fill="currentColor"
1374
+ aria-hidden="true"
1375
+ role="img"
1376
+ width="1em"
1377
+ height="1em"
1378
+ >
1379
+ <path
1380
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
1381
+ />
1382
+ </svg>
1347
1383
  </span>
1348
1384
  </button>
1349
1385
  </div>
@@ -1563,7 +1599,19 @@ Several components in the following examples do not include functional and/or ac
1563
1599
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
1564
1600
  >
1565
1601
  <span class="pf-v6-c-menu-toggle__icon">
1566
- <i class="fas fa-filter" aria-hidden="true"></i>
1602
+ <svg
1603
+ class="pf-v6-svg"
1604
+ viewBox="0 0 512 512"
1605
+ fill="currentColor"
1606
+ aria-hidden="true"
1607
+ role="img"
1608
+ width="1em"
1609
+ height="1em"
1610
+ >
1611
+ <path
1612
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
1613
+ />
1614
+ </svg>
1567
1615
  </span>
1568
1616
  </button>
1569
1617
  </div>
@@ -2785,7 +2833,19 @@ Several components in the following examples do not include functional and/or ac
2785
2833
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
2786
2834
  >
2787
2835
  <span class="pf-v6-c-menu-toggle__icon">
2788
- <i class="fas fa-filter" aria-hidden="true"></i>
2836
+ <svg
2837
+ class="pf-v6-svg"
2838
+ viewBox="0 0 512 512"
2839
+ fill="currentColor"
2840
+ aria-hidden="true"
2841
+ role="img"
2842
+ width="1em"
2843
+ height="1em"
2844
+ >
2845
+ <path
2846
+ d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
2847
+ />
2848
+ </svg>
2789
2849
  </span>
2790
2850
  </button>
2791
2851
  </div>
@@ -2819,7 +2819,7 @@ A search input can be used to filter tree view items. It is recommended that a t
2819
2819
  <span class="pf-v6-c-button__icon">
2820
2820
  <svg
2821
2821
  class="pf-v6-svg"
2822
- viewBox="0 0 192 512"
2822
+ viewBox="0 0 32 32"
2823
2823
  fill="currentColor"
2824
2824
  aria-hidden="true"
2825
2825
  role="img"
@@ -2827,7 +2827,7 @@ A search input can be used to filter tree view items. It is recommended that a t
2827
2827
  height="1em"
2828
2828
  >
2829
2829
  <path
2830
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
2830
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2831
2831
  />
2832
2832
  </svg>
2833
2833
  </span>
@@ -3216,7 +3216,7 @@ A search input can be used to filter tree view items. It is recommended that a t
3216
3216
  <span class="pf-v6-c-button__icon">
3217
3217
  <svg
3218
3218
  class="pf-v6-svg"
3219
- viewBox="0 0 192 512"
3219
+ viewBox="0 0 32 32"
3220
3220
  fill="currentColor"
3221
3221
  aria-hidden="true"
3222
3222
  role="img"
@@ -3224,7 +3224,7 @@ A search input can be used to filter tree view items. It is recommended that a t
3224
3224
  height="1em"
3225
3225
  >
3226
3226
  <path
3227
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
3227
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3228
3228
  />
3229
3229
  </svg>
3230
3230
  </span>
@@ -1782,7 +1782,7 @@ wrapperTag: div
1782
1782
  <div class="pf-v6-c-empty-state pf-m-lg">
1783
1783
  <div class="pf-v6-c-empty-state__content">
1784
1784
  <div class="pf-v6-c-empty-state__icon">
1785
- <i class="fas fa- fa-cogs" aria-hidden="true"></i>
1785
+ <i class="fas fa- fa-rh-ui-settings-fill" aria-hidden="true"></i>
1786
1786
  </div>
1787
1787
 
1788
1788
  <div
@@ -146,23 +146,11 @@ This demo implements the about modal, including the backdrop.
146
146
  type="button"
147
147
  aria-expanded="false"
148
148
  aria-label="Application launcher"
149
- >
150
- <span class="pf-v6-c-menu-toggle__icon">
151
- <i class="fas fa-th" aria-hidden="true"></i>
152
- </span>
153
- </button>
154
- </div>
155
- <div class="pf-v6-c-toolbar__item">
156
- <button
157
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
158
- type="button"
159
- aria-expanded="false"
160
- aria-label="Settings"
161
149
  >
162
150
  <span class="pf-v6-c-menu-toggle__icon">
163
151
  <svg
164
152
  class="pf-v6-svg"
165
- viewBox="0 0 32 32"
153
+ viewBox="0 0 512 512"
166
154
  fill="currentColor"
167
155
  aria-hidden="true"
168
156
  role="img"
@@ -170,12 +158,20 @@ This demo implements the about modal, including the backdrop.
170
158
  height="1em"
171
159
  >
172
160
  <path
173
- d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
161
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
174
162
  />
175
163
  </svg>
176
164
  </span>
177
165
  </button>
178
166
  </div>
167
+ <div class="pf-v6-c-toolbar__item">
168
+ <button
169
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
170
+ type="button"
171
+ aria-expanded="false"
172
+ aria-label="Settings"
173
+ ></button>
174
+ </div>
179
175
  <div class="pf-v6-c-toolbar__item">
180
176
  <button
181
177
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -184,7 +180,19 @@ This demo implements the about modal, including the backdrop.
184
180
  aria-label="Help"
185
181
  >
186
182
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-question-circle" aria-hidden="true"></i>
183
+ <svg
184
+ class="pf-v6-svg"
185
+ viewBox="0 0 512 512"
186
+ fill="currentColor"
187
+ aria-hidden="true"
188
+ role="img"
189
+ width="1em"
190
+ height="1em"
191
+ >
192
+ <path
193
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
194
+ />
195
+ </svg>
188
196
  </span>
189
197
  </button>
190
198
  </div>