diff --git a/src/assets/svg/error-sign.svg b/src/assets/svg/error-sign.svg
new file mode 100644
index 00000000..edf6bc1f
--- /dev/null
+++ b/src/assets/svg/error-sign.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
+    <g clip-path="url(#clip0_1089_7422)">
+        <mask id="mask0_1089_7422" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" style="mask-type: alpha;">
+            <rect width="20" height="20" style="fill: white;"></rect>
+        </mask>
+        <g mask="url(#mask0_1089_7422)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.4775 4.4775 0 10 0C15.5225 0 20 4.4775 20 10C20 15.5225 15.5225 20 10 20C4.4775 20 0 15.5225 0 10ZM11 14.0766C11 14.8122 10.5188 15.3333 9.83335 15.3333C9.13335 15.3333 8.66669 14.8122 8.66669 14.0766C8.66669 13.341 9.13335 12.8046 9.83335 12.8046C10.5188 12.8046 11 13.341 11 14.0766ZM10.65 11.9463H8.98752L8.75419 4.66663H10.8834L10.65 11.9463Z" style="fill: rgb(219, 0, 0);"></path>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_1089_7422">
+            <rect width="20" height="20" fill="white"></rect>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/stories/ErrorMessage.jsx b/src/stories/ErrorMessage.jsx
index 2fb8ede5..86a4182f 100644
--- a/src/stories/ErrorMessage.jsx
+++ b/src/stories/ErrorMessage.jsx
@@ -8,6 +8,9 @@ import { getThemePaletteBackgroundColor } from "../functions/theme";
 // Stylesheets
 import style from "./ErrorMessage.module.scss";
 
+// Assets
+import errorSign from "../assets/svg/error-sign.svg?url";
+
 const ErrorMessage = (props) => {
     const getThemeErrorMessageStyle = (theme) => {
         return {
@@ -21,7 +24,12 @@ const ErrorMessage = (props) => {
             style: getThemeErrorMessageStyle(props.theme)
         };
     };
-    return <span aria-live="polite" {...getErrorElementProps()}>{props.content ? props.content : ""}</span>;
+    return (
+        <span aria-live="polite" {...getErrorElementProps()}>
+            <img src={errorSign} alt="" className={style.errorSign} />
+            {props.content ? props.content : ""}
+        </span>
+    );
 };
 
 ErrorMessage.propTypes = {
diff --git a/src/stories/ErrorMessage.module.scss b/src/stories/ErrorMessage.module.scss
index eb5669dc..0b2ef1f5 100644
--- a/src/stories/ErrorMessage.module.scss
+++ b/src/stories/ErrorMessage.module.scss
@@ -1,16 +1,28 @@
 @import "../style/global.scss";
 
+@keyframes messageIn {
+    0% {
+        opacity: 0;
+        transform: translateX(2em);
+    }
+}
+
 .errorMessage {
-    display: block;
-    color: $color-error;
+    display: flex;
+    align-items: center;
+    font-family: $default-font;
     font-size: 16px;
     font-weight: 400;
-    line-height: 1.2;
-    margin: 4px 0;
-    font-family: $default-font;
-    font-style: italic;
-    overflow-wrap: break-word;
-    @media only screen and (min-width: $screen-sm) {
-        font-size: 19px;
+    line-height: 24px;
+    letter-spacing: 0.01em;
+    color: $color-error;
+    margin: 12px 0 0;
+    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
+    .errorSign {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 0.5em;
     }
 }