diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 2e489c7cb8..eee885244f 100755
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -6,7 +6,7 @@ $light: #f3f3f3;
 $grey: #737373;
 $grey-light: #cacaca;
 $brand-cool-gray: #63666A;
-$orange: #BD472A;
+$slate: #434343;
 
 $success: #00664F;
 $success-light: lighten($success, 76%);
diff --git a/src/components/alert/Alert.stories.js b/src/components/alert/Alert.stories.js
index 37bce8b272..657128c9b1 100644
--- a/src/components/alert/Alert.stories.js
+++ b/src/components/alert/Alert.stories.js
@@ -71,7 +71,7 @@ Info.args = {
   dismissible: false,
   centerIconVertically: false,
   default: `
-    <h2 class="headline headline--serif">
+    <h2 class="headline headline--uppercase">
       Alert title
     </h2>
     <p>Lorem ipsum sit dolor amet.</p>
diff --git a/src/components/alert/Alert.vue b/src/components/alert/Alert.vue
index e3d5833ec3..df59551140 100644
--- a/src/components/alert/Alert.vue
+++ b/src/components/alert/Alert.vue
@@ -87,7 +87,8 @@ const classes = computed(() => {
     </div>
     <slot class="alert__content" name="default">Body</slot>
     <button v-if="props.dismissible" data-dismiss="alert">
-      <i class="fas fa-times"></i>
+      <i class="fa-solid fa-slash"></i>
+      <i class="fa-solid fa-slash fa-flip-horizontal"></i>
     </button>
   </div>
 </template>
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 03b469c96e..c86aecee66 100755
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -1,5 +1,4 @@
 @import '../../assets/scss/variables';
-@import '../../assets/scss/variables';
 @import '../../assets/scss/utilities';
 @import '../../assets/scss/border';
 
@@ -30,10 +29,12 @@
 
   * {
     margin-bottom: 0;
+    color: white;
 
     & + *:not(span):not(div):not(svg) {
       margin-top: .4rem;
-      line-height: 1.3;
+      font-size: 1.1rem;
+      opacity: 0.8;
     }
   }
 }
@@ -44,12 +45,26 @@
   padding: 0 $lg 0 0;
 
   .fa-stack {
-    width: 2em;
+    height: 36px;
+    width: 36px;
+  }
+
+  .fas {
+    color: white;
+  }
+
+  .fa-circle {
+    border: 2px solid white;
+    border-radius: 50%;
+    color: transparent;
   }
 
   .svg-inline--fa.fa-stack-2x,
-  .svg-inline--fa.fa-stack-1x {
+  .svg-inline--fa.fa-stack-1x,
+  .fa-stack-2x,
+  .fa-stack-1x {
     width: 100%;
+    height: 100%;
   }
 
   .fa-1x {
@@ -60,38 +75,40 @@
 
 // === Alert Colors === //
 .alert--danger {
-  background: $danger-light;
-
-  .fa-circle {
-    color: $danger;
-  }
+  background: $danger;
 }
 
 .alert--success {
-  background: $success-light;
-
-  .fa-circle {
-    color: $success;
-  }
+  background: $success;
 }
 
 .alert--warning {
-  background: $warning-light;
+  background: $warning;
+  color: $slate;
+
+  .fa-exclamation-triangle {
+    margin-top: -2px;
+    color: $slate;
+  }
 
   .fa-circle {
-    color: $orange;
+    border-color: $slate;
   }
 
-  .fa-exclamation-triangle {
-    margin-top: -2px;
+  * {
+    color: $slate;
+
+    & + *:not(span):not(div):not(svg) {
+      opacity: 0.9;
+    }
   }
 }
 
 .alert--info {
-  background: $info-light;
+  background: $info;
 
-  .fa-circle {
-    color: $info;
+  .fa-info {
+    margin-top: -1px;
   }
 }
 // === End: Alert Icon === //
@@ -124,8 +141,17 @@
     height: 42px;
     width: 42px;
 
-    i {
-      font-size: 1.5rem;
+    i.fa-solid.fa-slash {
+      font-size: 1rem;
+      position: absolute;
+      left: 9px;
+      top: 6px;
+      margin: 0;
+      transform: rotate(10deg);
+
+      &.fa-flip-horizontal {
+        transform: rotate(275deg);
+      }
     }
   }
 }