diff --git a/src/core/client/ui/components/Icon/Icon.css b/src/core/client/ui/components/Icon/Icon.css
index 37fb390d5..f594402b1 100644
--- a/src/core/client/ui/components/Icon/Icon.css
+++ b/src/core/client/ui/components/Icon/Icon.css
@@ -36,6 +36,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.xsm {
+  font-size: 14px;
+  width: 14px;
+}
 .sm {
   font-size: 18px;
   width: 18px;
diff --git a/src/core/client/ui/components/Icon/Icon.mdx b/src/core/client/ui/components/Icon/Icon.mdx
index 83428c28b..4c9197a48 100644
--- a/src/core/client/ui/components/Icon/Icon.mdx
+++ b/src/core/client/ui/components/Icon/Icon.mdx
@@ -14,6 +14,7 @@ Checkout available icons https://material.io/tools/icons/
 
 ## Basic usage
 <Playground>
+  <Icon size="xsm">face</Icon>
   <Icon size="sm">face</Icon>
   <Icon size="md">face</Icon>
   <Icon size="lg">face</Icon>
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index a402aae8a..0f0e2fb90 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/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>
 
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 74ef6ddcd..b9552cb0b 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/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}