diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a8dacf97e..0feb158032 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -80,6 +80,7 @@
 * Use component wrapper on reorderable list component ([PR #4474](https://github.com/alphagov/govuk_publishing_components/pull/4474))
 * Use "button" button type for copy to clipboard component ([PR #4480](https://github.com/alphagov/govuk_publishing_components/pull/4480))
 * Use component wrapper on signup link component ([PR #4481](https://github.com/alphagov/govuk_publishing_components/pull/4481))
+* Update Govspeak "Warning Text" component styles ([PR #4487](https://github.com/alphagov/govuk_publishing_components/pull/4487))
 
 ## 46.2.0
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss
index 1f2bf67a7b..6baf89055e 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss
@@ -8,29 +8,23 @@
 
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
+  @import "govuk/components/warning-text/warning-text";
+
   .help-notice {
     $icon-size: 35px;
-    $line-height-mobile: 20px;
-    $line-height-tablet: 25px;
+    $icon-spacing: 10px;
 
     margin: 2em 0;
+    padding-left: calc($icon-size + $icon-spacing);
+    position: relative;
 
-    // Add '!' icon
-    background-image: url("govuk_publishing_components/icon-important.svg");
-    background-size: $icon-size $icon-size;
-    background-repeat: no-repeat;
-    min-height: $icon-size;
-    padding-left: $icon-size;
-
-    // Center the icon around the baseline
-    padding-top: calc(($icon-size - $line-height-mobile) / 2);
-
-    @include govuk-media-query($from: tablet) {
-      padding-top: calc(($icon-size - $line-height-tablet) / 2);
+    &::before {
+      content: "!";
+      @include govuk-typography-weight-bold($important: false);
+      @extend .govuk-warning-text__icon; // stylelint-disable-line scss/at-extend-no-missing-placeholder
     }
 
     p {
-      margin-left: 1em;
       @include govuk-font($size: 19, $weight: bold);
     }
   }