diff --git a/assets/images/icon-close-fleet-purple-16x16@2x.png b/assets/images/icon-close-fleet-purple-16x16@2x.png
new file mode 100644
index 0000000000..106ac9e468
Binary files /dev/null and b/assets/images/icon-close-fleet-purple-16x16@2x.png differ
diff --git a/assets/images/icon-close-white-16x16@2x.png b/assets/images/icon-close-white-16x16@2x.png
new file mode 100644
index 0000000000..999954108d
Binary files /dev/null and b/assets/images/icon-close-white-16x16@2x.png differ
diff --git a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
index eb54aeeff9..3cf9452840 100644
--- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
+++ b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
@@ -41,13 +41,13 @@ const FlashMessage = ({
         )}
       </div>
       <div className={`${baseClass}__action`}>
-        <Button
-          className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
-          variant="unstyled"
-          onClick={onRemoveFlash}
-        >
-          <FleetIcon name="x" />
-        </Button>
+        <div className={`${baseClass}__ex`}>
+          <Button
+            className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
+            variant="unstyled"
+            onClick={onRemoveFlash}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index f2b62259e0..122d89f3ad 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -43,10 +43,11 @@
     span {
       margin-left: 15px;
       margin-right: 15px;
+      font-size: $small;
     }
 
     .fleeticon {
-      font-size: $large;
+      font-size: $small;
     }
   }
 
@@ -63,15 +64,33 @@
     cursor: pointer;
     text-align: center;
     margin-left: 15px;
+    height: 37px;
 
     .fleeticon {
       transition: color 150ms ease-in-out;
       color: $core-fleet-blue;
-      font-size: $large;
+      font-size: $small;
 
       &:hover {
         color: $core-white;
       }
     }
   }
+
+  &__ex {
+    text-decoration: none;
+
+    .button::after {
+      content: url("../assets/images/icon-close-white-16x16@2x.png");
+      transform: scale(0.5);
+      border-radius: 0px;
+      z-index: 4;
+    }
+
+    .button:hover::after {
+      content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
+      transform: scale(0.5);
+      border-radius: 0px;
+    }
+  }
 }