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

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -89,7 +89,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       aria-label="Clear utilities and icon with placeholder example"
     >
       <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>
@@ -158,8 +170,20 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       type="button"
       aria-label="Clear error validation example"
     >
-      <span class="pf-v6-c-button__text">
-        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <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>
@@ -186,8 +210,20 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       type="button"
       aria-label="Clear input"
     >
-      <span class="pf-v6-c-button__text">
-        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <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>
@@ -224,7 +260,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-one-button text-input-group-filters-label-group-label-one-text"
                 >
                   <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>
               </span>
@@ -247,7 +295,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-two-button text-input-group-filters-label-group-label-two-text"
                 >
                   <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>
               </span>
@@ -270,7 +330,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-three-button text-input-group-filters-label-group-label-three-text"
                 >
                   <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>
               </span>
@@ -293,7 +365,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-four-button text-input-group-filters-label-group-label-four-text"
                 >
                   <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>
               </span>
@@ -316,7 +400,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-five-button text-input-group-filters-label-group-label-five-text"
                 >
                   <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>
               </span>
@@ -339,7 +435,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-label-group-label-six-button text-input-group-filters-label-group-label-six-text"
                 >
                   <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>
               </span>
@@ -373,7 +481,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       aria-label="Clear filter example"
     >
       <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>
@@ -410,7 +530,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-one-button text-input-group-filters-expanded-label-group-label-one-text"
                 >
                   <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>
               </span>
@@ -433,7 +565,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-two-button text-input-group-filters-expanded-label-group-label-two-text"
                 >
                   <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>
               </span>
@@ -456,7 +600,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-three-button text-input-group-filters-expanded-label-group-label-three-text"
                 >
                   <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>
               </span>
@@ -479,7 +635,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-four-button text-input-group-filters-expanded-label-group-label-four-text"
                 >
                   <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>
               </span>
@@ -502,7 +670,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-five-button text-input-group-filters-expanded-label-group-label-five-text"
                 >
                   <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>
               </span>
@@ -525,7 +705,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-six-button text-input-group-filters-expanded-label-group-label-six-text"
                 >
                   <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>
               </span>
@@ -548,7 +740,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-seven-button text-input-group-filters-expanded-label-group-label-seven-text"
                 >
                   <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>
               </span>
@@ -571,7 +775,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-eight-button text-input-group-filters-expanded-label-group-label-eight-text"
                 >
                   <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>
               </span>
@@ -594,7 +810,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-nine-button text-input-group-filters-expanded-label-group-label-nine-text"
                 >
                   <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>
               </span>
@@ -617,7 +845,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-ten-button text-input-group-filters-expanded-label-group-label-ten-text"
                 >
                   <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>
               </span>
@@ -640,7 +880,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-eleven-button text-input-group-filters-expanded-label-group-label-eleven-text"
                 >
                   <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>
               </span>
@@ -663,7 +915,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-twelve-button text-input-group-filters-expanded-label-group-label-twelve-text"
                 >
                   <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>
               </span>
@@ -686,7 +950,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-thirteen-button text-input-group-filters-expanded-label-group-label-thirteen-text"
                 >
                   <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>
               </span>
@@ -709,7 +985,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
                   aria-labelledby="text-input-group-filters-expanded-label-group-label-fourteen-button text-input-group-filters-expanded-label-group-label-fourteen-text"
                 >
                   <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>
               </span>
@@ -734,7 +1022,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       aria-label="Clear filters expanded example"
     >
       <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>
@@ -816,7 +1116,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Clear search input group no match"
     >
       <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>
@@ -853,7 +1165,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Clear search input group match with result count"
     >
       <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>
@@ -892,12 +1216,36 @@ The React implementation can be found in the [search input](/components/search-i
         disabled
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 320 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+            />
+          </svg>
         </span>
       </button>
       <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 320 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -907,7 +1255,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Clear search input group match with navigable options"
     >
       <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>
@@ -946,7 +1306,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -957,7 +1329,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Close search input group expandable"
     >
       <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>
@@ -994,7 +1378,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Open search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1005,7 +1401,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Close search input group expandable"
     >
       <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>
@@ -1042,7 +1450,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Submit search input group"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 448 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1076,7 +1496,19 @@ The React implementation can be found in the [search input](/components/search-i
           aria-label="Clear advance search input group collapsed"
         >
           <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>
@@ -1090,7 +1522,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Advanced search collapsed"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 320 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1101,7 +1545,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Search advance search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 448 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1135,7 +1591,19 @@ The React implementation can be found in the [search input](/components/search-i
           aria-label="Clear advance search input group expanded"
         >
           <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>
@@ -1149,7 +1617,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Advanced search expanded"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 320 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1160,7 +1640,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Search advance search input group expanded"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 448 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -1291,7 +1783,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Clear autocomplete search input group"
     >
       <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>
@@ -1359,7 +1863,19 @@ The React implementation can be found in the [search input](/components/search-i
       aria-label="Clear autocomple search input group last option hint"
     >
       <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>
@@ -1408,7 +1924,19 @@ The React implementation can be found in the [search input](/components/search-i
             aria-label="Clear advance search input group expanded with autocomplete"
           >
             <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>
@@ -1422,7 +1950,19 @@ The React implementation can be found in the [search input](/components/search-i
         aria-label="Advanced search expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 320 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -1433,7 +1973,19 @@ The React implementation can be found in the [search input](/components/search-i
         aria-label="Search advanced search input group expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-arrow-right" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 448 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
         </span>
       </button>
     </div>