diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index 770f604f0..b4db66fc7 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -180,14 +175,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -290,14 +280,9 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -321,14 +306,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -546,14 +526,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -577,14 +552,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index b382a8713..e18788d70 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -70,14 +65,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -124,14 +114,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -215,14 +200,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -251,14 +231,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -287,14 +262,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -318,14 +288,9 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -432,14 +397,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -468,14 +428,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -499,14 +454,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -590,14 +540,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -649,14 +594,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -680,14 +620,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -771,14 +706,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -807,14 +737,9 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Invalid characters. Try again.
           </span>
@@ -843,14 +768,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -874,14 +794,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -965,14 +880,9 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -1001,14 +911,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1037,14 +942,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1068,14 +968,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1159,14 +1054,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1195,14 +1085,9 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Usernames cannot be longer than ⁨20⁩ characters.
           </span>
@@ -1231,14 +1116,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1262,14 +1142,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1353,14 +1228,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1389,14 +1259,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1425,14 +1290,9 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Password must contain at least ⁨8⁩ characters.
           </span>
@@ -1456,14 +1316,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1547,14 +1402,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1583,14 +1433,9 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Username must contain at least ⁨3⁩ characters.
           </span>
@@ -1619,14 +1464,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1650,14 +1490,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1741,14 +1576,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1777,14 +1607,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1813,14 +1638,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1844,14 +1664,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -2077,14 +1892,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2113,14 +1923,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2149,14 +1954,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2180,14 +1980,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index 7f03e37e0..da5a985c1 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -2,14 +2,9 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="ValidationMessage-root ValidationMessage-colorError custom"
+  className="Message-root custom"
+  icon="warning"
 >
-  <span
-    aria-hidden="true"
-    className="Icon-root ValidationMessage-icon Icon-sm"
-  >
-    warning
-  </span>
   Hello World
 </div>
 `;