diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
index eda3032bf8c..f54dcb1c49e 100644
--- a/app/scripts/modules/core/src/presentation/main.less
+++ b/app/scripts/modules/core/src/presentation/main.less
@@ -888,6 +888,13 @@ select:invalid {
   color: var(--color-danger);
 }
 
+.success-message {
+  text-align: left;
+  display: block;
+  font-weight: 600;
+  color: var(--color-success);
+}
+
 .warning-message {
   text-align: left;
   display: block;
diff --git a/app/scripts/modules/core/src/validation/ValidationMessage.tsx b/app/scripts/modules/core/src/validation/ValidationMessage.tsx
index 9f2e145ed85..f3c1d430386 100644
--- a/app/scripts/modules/core/src/validation/ValidationMessage.tsx
+++ b/app/scripts/modules/core/src/validation/ValidationMessage.tsx
@@ -2,11 +2,27 @@ import * as React from 'react';
 
 export interface IValidationMessageProps {
   message: React.ReactNode;
-  type: 'error' | 'warning' | 'message';
+  type: 'success' | 'error' | 'warning' | 'message' | 'none';
+  // default: true
+  showIcon?: boolean;
 }
 
-export const ValidationMessage = (props: IValidationMessageProps) => (
-  <div className={`${props.type}-message`}>
-    <span className="fa fa-exclamation-circle" /> {props.message}
-  </div>
-);
+const iconClassName = {
+  success: 'far fa-check-circle',
+  error: 'fa fa-exclamation-circle',
+  warning: 'fa fa-exclamation-circle',
+  message: 'icon-view-1',
+  none: '',
+};
+
+export const ValidationMessage = (props: IValidationMessageProps) => {
+  const divClassName = `${props.type}-message`;
+  const showIcon = props.showIcon === undefined ? true : props.showIcon;
+  const spanClassName = (showIcon && iconClassName[props.type]) || '';
+
+  return (
+    <div className={divClassName}>
+      <span className={spanClassName} /> {props.message}
+    </div>
+  );
+};