Extending Icon for extra small

src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx

@@ -13,7 +13,7 @@ import
   <Flex itemGutter direction="column">
     <ValidationMessage>Account with this email address already exists. Try another email</ValidationMessage>
     <ValidationMessage>Please enter a valid email address</ValidationMessage>
-    <ValidationMessage>Invalid characters. Try again</ValidationMessage>
+    <ValidationMessage color="error">Invalid characters. Try again</ValidationMessage>
   </Flex>
 </Playground>
 

src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx

@@ -40,7 +40,7 @@ const ValidationMessage: StatelessComponent<InnerProps> = props => {
     <div className={rootClassName} {...rest}>
       {color === "error" && (
         <Icon size="sm" className={classes.icon}>
-          face
+          warning
         </Icon>
       )}
       {children}