diff --git a/css/components/callout.css b/css/components/callout.css
index 53eba0c0..a4b50023 100644
--- a/css/components/callout.css
+++ b/css/components/callout.css
@@ -2,13 +2,28 @@
   @file Base styles for call out paragraphs / advanced callout div container
 */
 .callout {
+  display: flex;
+  gap: var(--spacing);
   padding: 1.5rem;
-  text-align: center;
   color: var(--color-white);
   font-size: var(--font-size-large);
   font-weight: bold;
 }
 
+.callout::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 2.5rem;
+  padding: var(--spacing-small);
+  content: "!";
+  color: var(--color-black);
+  border-radius: 999rem;
+  background-color: var(--color-white);
+  font-size: 1.5rem;
+}
+
 .callout a {
   color: var(--color-white);
 }
@@ -26,26 +41,41 @@
 .callout-primary {
   background-color: var(--color-accent);
 }
+.callout-primary::before {
+  color: var(--color-accent);
+}
 
 /* Callout success bg and link colour */
 .callout-success {
   background-color: var(--color-success);
 }
+.callout-success::before {
+  color: var(--color-success);
+}
 
 /* Callout danger bg and link colour */
 .callout-danger {
   background-color: var(--color-danger);
 }
+.callout-danger::before {
+  color: var(--color-danger);
+}
 
 /* Callout teal bg and link colour */
 .callout-teal {
   background-color: teal;
 }
+.callout-teal::before {
+  color: teal;
+}
 
 /* Callout carbon bg and link colour */
 .callout-carbon {
   background-color: var(--color-grey-dark);
 }
+.callout-carbon::before {
+  color: var(--color-grey-dark);
+}
 
 /* Callout yellow bg and link colour */
 .callout-yellow,
diff --git a/css/components/wysiwyg-styles.css b/css/components/wysiwyg-styles.css
index 4176603e..b0478fe9 100644
--- a/css/components/wysiwyg-styles.css
+++ b/css/components/wysiwyg-styles.css
@@ -4,6 +4,8 @@
 
 /* Alerts */
 .alert {
+  display: flex;
+  gap: var(--spacing);
   padding: var(--spacing-largest);
   border: var(--border-large);
   border-color: var(--border-color-alert);
@@ -12,25 +14,54 @@
   font-weight: bold;
 }
 
+.alert::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 2.5rem;
+  padding: var(--spacing-small);
+  content: "!";
+  color: var(--color-white);
+  border-radius: 999rem;
+  background-color: var(--color-black);
+  font-size: 1.5rem;
+}
+
 .alert-primary {
   border-color: var(--color-accent);
 }
+.alert-primary::before {
+  background-color: var(--color-accent);
+}
 
 .alert-info {
   border-color: var(--color-info);
 }
+.alert-info::before {
+  background-color: var(--color-info);
+}
 
 .alert-danger {
   border-color: var(--color-danger);
 }
+.alert-danger::before {
+  background-color: var(--color-danger);
+}
 
 .alert-fail {
   border-color: var(--color-warning);
 }
+.alert-fail::before {
+  background-color: var(--color-warning);
+}
 
 .alert-success {
   border-color: var(--color-success);
 }
+.alert-success::before {
+  background-color: var(--color-success);
+}
 
 /* Links */
 .btn.btn-start {