@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -262,6 +262,45 @@ cssPrefix: pf-v6-c-menu-toggle
 
 ```
 
+### Plain circle
+
+```html isBeta
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Circle styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-expanded pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Circle and expanded styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+  aria-label="Circle and disabled styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ### Plain with text
 
 ```html
@@ -679,7 +718,19 @@ cssPrefix: pf-v6-c-menu-toggle
         aria-label="Clear input"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -2189,6 +2240,7 @@ Shown with default, primary, and secondary styling
 | `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
 | `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
 | `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
+| `.pf-m-circle` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to be circular in shape. This is intended to be applied only to a plain menu toggle without any text. |
 | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
 | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
 | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |

package/docs/components/ModalBox/examples/ModalBox.md

@@ -19,7 +19,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -50,7 +62,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -106,7 +130,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -139,7 +175,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -172,7 +220,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -205,7 +265,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -232,7 +304,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -269,7 +353,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -316,7 +412,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -324,7 +432,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 576 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
       </h1>
@@ -349,7 +469,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -357,7 +489,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Default
@@ -389,7 +533,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -397,7 +553,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Info
@@ -429,7 +597,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -437,7 +617,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Success
@@ -469,7 +661,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -477,7 +681,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Warning
@@ -509,7 +725,19 @@ cssPrefix: pf-v6-c-modal-box
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -517,7 +745,19 @@ cssPrefix: pf-v6-c-modal-box
     <div class="pf-v6-c-modal-box__header-main">
       <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Danger
@@ -551,7 +791,19 @@ The status modifier classes can be applied directly to the modal title element,
   <div class="pf-v6-c-modal-box__close">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -562,7 +814,19 @@ The status modifier classes can be applied directly to the modal title element,
         id="danger-alert-title-title"
       >
         <span class="pf-v6-c-modal-box__title-icon">
-          <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 32 32"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
+            />
+          </svg>
         </span>
         <span class="pf-v6-u-screen-reader">
           Danger
@@ -597,7 +861,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
 | `aria-modal="true"` | `.pf-v6-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
-| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/develop#trapping-focus). **Required** |
 | `form="[id of form in modal body]"` | `.pf-v6-c-modal-box__footer .pf-v6-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
 | `tabindex="0"` | `.pf-v6-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |