diff --git a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
index 0610600e5..420348890 100644
--- a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
+++ b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
@@ -8,6 +8,21 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -48,21 +63,6 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-cwQMhQ {
     border-collapse: separate;
     border-spacing: 0;
@@ -333,24 +333,24 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-cwQMhQ-urYIk-size-md .c-ihQtuj,
   .c-cwQMhQ-urYIk-size-md .c-jhJxGZ,
   .c-cwQMhQ-urYIk-size-md .c-jwhJBv {
@@ -577,17 +577,17 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     margin-bottom: var(--space-4);
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-cwQMhQ-illIiIE-css {
     margin-bottom: var(--space-4);
   }
@@ -656,11 +656,10 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     height: max-content;
   }
 
-  .c-fDzwZw-igyKUXm-css {
+  .c-fDzwZw-ijGdhFN-css {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: var(--space-1);
   }
 
   .c-dhzjXW-ibICGYT-css {
@@ -733,6 +732,21 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] =
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -773,21 +787,6 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] =
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-cwQMhQ {
     border-collapse: separate;
     border-spacing: 0;
@@ -989,24 +988,24 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] =
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-cwQMhQ-urYIk-size-md .c-ihQtuj,
   .c-cwQMhQ-urYIk-size-md .c-jhJxGZ,
   .c-cwQMhQ-urYIk-size-md .c-jwhJBv {
@@ -1147,17 +1146,17 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] =
     margin-bottom: var(--space-4);
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-cwQMhQ-illIiIE-css {
     margin-bottom: var(--space-4);
   }
@@ -2240,6 +2239,21 @@ exports[`DataTable component renders 1`] = `
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -2280,21 +2294,6 @@ exports[`DataTable component renders 1`] = `
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-cwQMhQ {
     border-collapse: separate;
     border-spacing: 0;
@@ -2482,24 +2481,24 @@ exports[`DataTable component renders 1`] = `
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-cwQMhQ-urYIk-size-md .c-ihQtuj,
   .c-cwQMhQ-urYIk-size-md .c-jhJxGZ,
   .c-cwQMhQ-urYIk-size-md .c-jwhJBv {
@@ -2606,17 +2605,17 @@ exports[`DataTable component renders 1`] = `
     margin-bottom: var(--space-4);
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-cwQMhQ-illIiIE-css {
     margin-bottom: var(--space-4);
   }
@@ -2677,15 +2676,9 @@ exports[`DataTable component renders 1`] = `
   <div
     class="c-PJLV c-PJLV-ihDGYkC-css"
   >
-    <input
-      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-      name="User search"
-      type="search"
-      value=""
-    />
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -2698,6 +2691,12 @@ exports[`DataTable component renders 1`] = `
         r="6"
       />
     </svg>
+    <input
+      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+      name="User search"
+      type="search"
+      value=""
+    />
   </div>
   <table
     class="c-cwQMhQ c-cwQMhQ-urYIk-size-md c-cwQMhQ-fplEaP-corners-round c-cwQMhQ-illIiIE-css"
@@ -3099,6 +3098,21 @@ exports[`DataTable server-side renders 1`] = `
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -3139,21 +3153,6 @@ exports[`DataTable server-side renders 1`] = `
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-cwQMhQ {
     border-collapse: separate;
     border-spacing: 0;
@@ -3385,24 +3384,24 @@ exports[`DataTable server-side renders 1`] = `
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-cwQMhQ-urYIk-size-md .c-ihQtuj,
   .c-cwQMhQ-urYIk-size-md .c-jhJxGZ,
   .c-cwQMhQ-urYIk-size-md .c-jwhJBv {
@@ -3569,17 +3568,17 @@ exports[`DataTable server-side renders 1`] = `
     margin-bottom: var(--space-4);
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-cwQMhQ-illIiIE-css {
     margin-bottom: var(--space-4);
   }
@@ -3648,11 +3647,10 @@ exports[`DataTable server-side renders 1`] = `
     height: max-content;
   }
 
-  .c-fDzwZw-igyKUXm-css {
+  .c-fDzwZw-ijGdhFN-css {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: var(--space-1);
   }
 
   .c-dhzjXW-ibICGYT-css {
@@ -3674,14 +3672,9 @@ exports[`DataTable server-side renders 1`] = `
   <div
     class="c-PJLV c-PJLV-ieFlhpX-css"
   >
-    <input
-      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-      type="search"
-      value=""
-    />
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -3694,6 +3687,11 @@ exports[`DataTable server-side renders 1`] = `
         r="6"
       />
     </svg>
+    <input
+      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+      type="search"
+      value=""
+    />
   </div>
   <table
     class="c-cwQMhQ c-cwQMhQ-urYIk-size-md c-cwQMhQ-fplEaP-corners-round c-cwQMhQ-illIiIE-css"
@@ -4095,6 +4093,21 @@ exports[`DataTable sticky columns renders 1`] = `
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -4135,21 +4148,6 @@ exports[`DataTable sticky columns renders 1`] = `
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-cwQMhQ {
     border-collapse: separate;
     border-spacing: 0;
@@ -4398,24 +4396,24 @@ exports[`DataTable sticky columns renders 1`] = `
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-cwQMhQ-urYIk-size-md .c-ihQtuj,
   .c-cwQMhQ-urYIk-size-md .c-jhJxGZ,
   .c-cwQMhQ-urYIk-size-md .c-jwhJBv {
@@ -4546,17 +4544,17 @@ exports[`DataTable sticky columns renders 1`] = `
     margin-bottom: var(--space-4);
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-cwQMhQ-illIiIE-css {
     margin-bottom: var(--space-4);
   }
@@ -4625,11 +4623,10 @@ exports[`DataTable sticky columns renders 1`] = `
     height: max-content;
   }
 
-  .c-fDzwZw-igyKUXm-css {
+  .c-fDzwZw-ijGdhFN-css {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: var(--space-1);
   }
 
   .c-dhzjXW-ibICGYT-css {
diff --git a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
index f70b524a1..cc47dcf10 100644
--- a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
+++ b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
@@ -12,6 +12,21 @@ exports[`SearchField component renders a field in error state - has no programma
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -52,21 +67,6 @@ exports[`SearchField component renders a field in error state - has no programma
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-fNCeYG {
     color: var(--colors-danger);
     margin-left: var(--space-1);
@@ -113,24 +113,24 @@ exports[`SearchField component renders a field in error state - has no programma
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-fZTBsJ-bXVTjQ-state-error {
     border: 1px solid var(--colors-danger);
   }
@@ -175,17 +175,17 @@ exports[`SearchField component renders a field in error state - has no programma
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
   .c-dhzjXW-ijkHUQU-css {
     margin-top: var(--space-2);
   }
@@ -221,18 +221,9 @@ exports[`SearchField component renders a field in error state - has no programma
       <div
         class="c-PJLV c-PJLV-ieFlhpX-css"
       >
-        <input
-          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-fZTBsJ-bXVTjQ-state-error c-cNcGUX c-cNcGUX-icRYcAH-css"
-          id="searchField"
-          llabel="Search Field"
-          name="searchField"
-          placeholder="Search Field"
-          type="search"
-          value=""
-        />
         <svg
           aria-hidden="true"
-          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -245,6 +236,15 @@ exports[`SearchField component renders a field in error state - has no programma
             r="6"
           />
         </svg>
+        <input
+          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-fZTBsJ-bXVTjQ-state-error c-cNcGUX c-cNcGUX-icSgxUp-css"
+          id="searchField"
+          llabel="Search Field"
+          name="searchField"
+          placeholder="Search Field"
+          type="search"
+          value=""
+        />
       </div>
       <div
         class="c-dhzjXW c-PJLV c-PJLV-iymbh-theme-error c-dhzjXW-ijkHUQU-css"
@@ -298,6 +298,21 @@ exports[`SearchField component renders a field with a disabled input - has no pr
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -337,21 +352,6 @@ exports[`SearchField component renders a field with a disabled input - has no pr
   .c-cNcGUX input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
-
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
 }
 
 @media  {
@@ -377,23 +377,23 @@ exports[`SearchField component renders a field with a disabled input - has no pr
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
+
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
 }
 
 @media  {
@@ -408,16 +408,16 @@ exports[`SearchField component renders a field with a disabled input - has no pr
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
+
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
 }
 
 <div>
@@ -441,18 +441,9 @@ exports[`SearchField component renders a field with a disabled input - has no pr
       <div
         class="c-PJLV c-PJLV-ieFlhpX-css"
       >
-        <input
-          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-          disabled=""
-          id="searchField"
-          name="searchField"
-          placeholder="Search Field"
-          type="search"
-          value=""
-        />
         <svg
           aria-hidden="true"
-          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -465,6 +456,15 @@ exports[`SearchField component renders a field with a disabled input - has no pr
             r="6"
           />
         </svg>
+        <input
+          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+          disabled=""
+          id="searchField"
+          name="searchField"
+          placeholder="Search Field"
+          type="search"
+          value=""
+        />
       </div>
     </div>
   </form>
@@ -483,6 +483,21 @@ exports[`SearchField component renders a field with a search input - has no prog
     margin: 0;
   }
 
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -522,21 +537,6 @@ exports[`SearchField component renders a field with a search input - has no prog
   .c-cNcGUX input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
-
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
 }
 
 @media  {
@@ -562,23 +562,23 @@ exports[`SearchField component renders a field with a search input - has no prog
     font-weight: 600;
   }
 
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
+
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
 }
 
 @media  {
@@ -593,16 +593,16 @@ exports[`SearchField component renders a field with a search input - has no prog
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
+
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
 }
 
 <div>
@@ -626,17 +626,9 @@ exports[`SearchField component renders a field with a search input - has no prog
       <div
         class="c-PJLV c-PJLV-ieFlhpX-css"
       >
-        <input
-          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-          id="searchField"
-          name="searchField"
-          placeholder="Search Field"
-          type="search"
-          value=""
-        />
         <svg
           aria-hidden="true"
-          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+          class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -649,6 +641,14 @@ exports[`SearchField component renders a field with a search input - has no prog
             r="6"
           />
         </svg>
+        <input
+          class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+          id="searchField"
+          name="searchField"
+          placeholder="Search Field"
+          type="search"
+          value=""
+        />
       </div>
     </div>
   </form>
diff --git a/lib/src/components/search-input/SearchInput.tsx b/lib/src/components/search-input/SearchInput.tsx
index 164f59c28..660ee0942 100644
--- a/lib/src/components/search-input/SearchInput.tsx
+++ b/lib/src/components/search-input/SearchInput.tsx
@@ -25,21 +25,21 @@ enum INPUT_ICON {
 }
 
 const StyledIcon = styled(Icon, {
-  color: '$tonal300',
+  color: '$grey700',
   position: 'absolute',
   pointerEvents: 'none',
   variants: {
     size: {
       sm: {
-        right: '$2',
+        left: '$2',
         size: '$1'
       },
       md: {
-        right: 10,
+        left: 10,
         size: 20
       },
       lg: {
-        right: 10,
+        left: 10,
         size: 20
       }
     }
@@ -131,8 +131,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.forwardRef(
           css={{
             position: 'absolute',
             top: '50%',
-            transform: 'translateY(-50%)',
-            right: '$1'
+            transform: 'translateY(-50%)'
           }}
           onClick={handleClear}
         >
@@ -143,6 +142,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.forwardRef(
 
     return (
       <Box css={{ position: 'relative', height: 'max-content', ...css }}>
+        {getIcon()}
         <StyledSearchInput
           ref={setInputElRef}
           size={size}
@@ -150,9 +150,8 @@ export const SearchInput: React.FC<SearchInputProps> = React.forwardRef(
           {...remainingProps}
           value={innerValue}
           onChange={handleOnChange}
-          css={{ pr: size === 'sm' ? '$5' : '$6' }}
+          css={{ pl: size === 'sm' ? '$5' : '$6' }}
         />
-        {getIcon()}
       </Box>
     )
   }
diff --git a/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap b/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
index b02f3e5c8..a8227bf88 100644
--- a/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
+++ b/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
@@ -2,6 +2,21 @@
 
 exports[`SearchInput component renders 1`] = `
 @media  {
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -41,41 +56,26 @@ exports[`SearchInput component renders 1`] = `
   .c-cNcGUX input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
-
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
 }
 
 @media  {
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
+
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
 }
 
 @media  {
@@ -84,30 +84,25 @@ exports[`SearchInput component renders 1`] = `
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
+
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
 }
 
 <div>
   <div
     class="c-PJLV c-PJLV-ieFlhpX-css"
   >
-    <input
-      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-      type="search"
-      value=""
-    />
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-md c-hvMhuR-icDTsBU-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-md c-jTFaKU-icDTsBU-css"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -120,12 +115,32 @@ exports[`SearchInput component renders 1`] = `
         r="6"
       />
     </svg>
+    <input
+      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+      type="search"
+      value=""
+    />
   </div>
 </div>
 `;
 
 exports[`SearchInput component renders clear button when non-empty defaultValue 1`] = `
 @media  {
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -166,21 +181,6 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-fDzwZw {
     align-items: center;
     -webkit-appearance: none;
@@ -246,24 +246,24 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
 }
 
 @media  {
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-fDzwZw-PrXKS-size-md {
     height: var(--sizes-4);
     width: var(--sizes-4);
@@ -301,22 +301,21 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  .c-fDzwZw-igyKUXm-css {
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
+  .c-fDzwZw-ijGdhFN-css {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: var(--space-1);
   }
 }
 
@@ -324,14 +323,9 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
   <div
     class="c-PJLV c-PJLV-ieFlhpX-css"
   >
-    <input
-      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icRYcAH-css"
-      type="search"
-      value="testingWhenDefaultValue"
-    />
     <button
       aria-label="clearWhenDefaultValue"
-      class="c-fDzwZw c-fDzwZw-PrXKS-size-md c-fDzwZw-otpKd-cv c-fDzwZw-igyKUXm-css c-PJLV"
+      class="c-fDzwZw c-fDzwZw-PrXKS-size-md c-fDzwZw-otpKd-cv c-fDzwZw-ijGdhFN-css c-PJLV"
       data-state="closed"
       type="button"
     >
@@ -346,12 +340,32 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
         />
       </svg>
     </button>
+    <input
+      class="c-fZTBsJ c-fZTBsJ-fwoCmE-size-md c-cNcGUX c-cNcGUX-icSgxUp-css"
+      type="search"
+      value="testingWhenDefaultValue"
+    />
   </div>
 </div>
 `;
 
 exports[`SearchInput component renders lg size 1`] = `
 @media  {
+  .c-dbrbZt {
+    display: inline-block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+
+  .c-jTFaKU {
+    color: var(--colors-grey700);
+    position: absolute;
+    pointer-events: none;
+  }
+
   .c-fZTBsJ {
     -webkit-appearance: none;
     appearance: none;
@@ -392,21 +406,6 @@ exports[`SearchInput component renders lg size 1`] = `
     display: none;
   }
 
-  .c-dbrbZt {
-    display: inline-block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vertical-align: middle;
-  }
-
-  .c-hvMhuR {
-    color: var(--colors-tonal300);
-    position: absolute;
-    pointer-events: none;
-  }
-
   .c-fDzwZw {
     align-items: center;
     -webkit-appearance: none;
@@ -472,24 +471,24 @@ exports[`SearchInput component renders lg size 1`] = `
 }
 
 @media  {
-  .c-fZTBsJ-fwoCmE-size-md {
-    height: var(--sizes-4);
-    font-size: var(--fontSizes-md);
-    line-height: 2;
-  }
-
   .c-dbrbZt-dMrjnF-size-md {
     height: var(--sizes-2);
     width: var(--sizes-2);
     stroke-width: 1.75;
   }
 
-  .c-hvMhuR-koUlob-size-md {
-    right: 10px;
+  .c-jTFaKU-kCbngQ-size-md {
+    left: 10px;
     height: 20px;
     width: 20px;
   }
 
+  .c-fZTBsJ-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
   .c-fDzwZw-PrXKS-size-md {
     height: var(--sizes-4);
     width: var(--sizes-4);
@@ -499,17 +498,17 @@ exports[`SearchInput component renders lg size 1`] = `
     max-width: 250px;
   }
 
+  .c-jTFaKU-kCbngQ-size-lg {
+    left: 10px;
+    height: 20px;
+    width: 20px;
+  }
+
   .c-fZTBsJ-jAZHIx-size-lg {
     height: var(--sizes-5);
     font-size: var(--fontSizes-md);
     line-height: 2;
   }
-
-  .c-hvMhuR-koUlob-size-lg {
-    right: 10px;
-    height: 20px;
-    width: 20px;
-  }
 }
 
 @media  {
@@ -518,22 +517,21 @@ exports[`SearchInput component renders lg size 1`] = `
     height: max-content;
   }
 
-  .c-cNcGUX-icRYcAH-css {
-    padding-right: var(--space-6);
-  }
-
-  .c-hvMhuR-icDTsBU-css {
+  .c-jTFaKU-icDTsBU-css {
     height: 20px;
     width: 20px;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  .c-fDzwZw-igyKUXm-css {
+  .c-cNcGUX-icSgxUp-css {
+    padding-left: var(--space-6);
+  }
+
+  .c-fDzwZw-ijGdhFN-css {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: var(--space-1);
   }
 }
 
@@ -541,14 +539,9 @@ exports[`SearchInput component renders lg size 1`] = `
   <div
     class="c-PJLV c-PJLV-ieFlhpX-css"
   >
-    <input
-      class="c-fZTBsJ c-fZTBsJ-jAZHIx-size-lg c-cNcGUX c-cNcGUX-icRYcAH-css"
-      type="search"
-      value=""
-    />
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-hvMhuR c-hvMhuR-koUlob-size-lg c-hvMhuR-icDTsBU-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-jTFaKU c-jTFaKU-kCbngQ-size-lg c-jTFaKU-icDTsBU-css"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -561,6 +554,11 @@ exports[`SearchInput component renders lg size 1`] = `
         r="6"
       />
     </svg>
+    <input
+      class="c-fZTBsJ c-fZTBsJ-jAZHIx-size-lg c-cNcGUX c-cNcGUX-icSgxUp-css"
+      type="search"
+      value=""
+    />
   </div>
 </div>
 `;