diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index e2bffd53d4c..07faa3a8a70 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,7 +1,7 @@
 <div class="confirmation show" *ngIf="visible">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
-    <div class="icon-container">
+    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
       <i class="fa icon" [ngClass]="iconClass"></i>
     </div>
     <div class="content">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
index 047b516d154..3b43c170def 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
@@ -40,8 +40,27 @@
         width: 100px;
         height: 100px;
         stroke-width: 1;
-        stroke: #f89406;
         fill: #fff;
+        font-size: 80px;
+        text-align: center;
+      }
+      &.neutral .icon {
+      }
+      &.info .icon {
+        stroke: #2f96b4;
+        color: #2f96b4;
+      }
+      &.success .icon {
+        stroke: #51a351;
+        color: #51a351;
+      }
+      &.warning .icon {
+        stroke: #f89406;
+        color: #f89406;
+      }
+      &.error .icon {
+        stroke: #bd362f;
+        color: #bd362f;
       }
     }
     .content {