diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
index d1335f8d9..6f7bfc8cc 100644
--- a/src/core/client/ui/components/Message/Message.spec.tsx
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -4,6 +4,7 @@ import TestRenderer from "react-test-renderer";
 import { PropTypesOf } from "talk-ui/types";
 
 import Message from "./Message";
+import MessageIcon from "./MessageIcon";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof Message> = {
@@ -13,3 +14,16 @@ it("renders correctly", () => {
   const renderer = TestRenderer.create(<Message {...props} />);
   expect(renderer.toJSON()).toMatchSnapshot();
 });
+
+it("renders icon", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+  };
+
+  const renderer = TestRenderer.create(
+    <Message {...props}>
+      <MessageIcon>alert</MessageIcon>Alert Message
+    </Message>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
index 0b0f3046d..ae81503dc 100644
--- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -2,8 +2,22 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Message-root Message-colorInfo custom"
+  className="Message-root Message-colorGrey custom"
 >
   Hello World
 </div>
 `;
+
+exports[`renders icon 1`] = `
+<div
+  className="Message-root Message-colorGrey custom"
+>
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    alert
+  </span>
+  Alert Message
+</div>
+`;