diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index d6413c1a89c..0638d300a44 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -140,16 +140,11 @@ tr .form-item,
 .form-item__label.form-required::after,
 .fieldset__label.form-required::after {
   display: inline-block;
-  width: 0.4375rem;
-  height: 0.4375rem;
-  margin-right: 0.3em;
-  margin-left: 0.3em;
-  content: "";
-  vertical-align: super;
-  /* Use a background image to prevent screen readers from announcing the text. */
-  background-image: url(../../images/core/ee0000/required.svg);
-  background-repeat: no-repeat;
-  background-size: 0.4375rem 0.4375rem;
+  margin-right: 0.15em;
+  margin-left: 0.15em;
+  content: "*";
+  color: #d72222;
+  font-size: 0.875rem;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css
index 390944840de..9b7f7ec736e 100644
--- a/core/themes/claro/css/components/form.pcss.css
+++ b/core/themes/claro/css/components/form.pcss.css
@@ -70,16 +70,11 @@ tr .form-item,
 .form-item__label.form-required::after,
 .fieldset__label.form-required::after {
   display: inline-block;
-  width: var(--input--required-mark-size);
-  height: var(--input--required-mark-size);
-  margin-right: 0.3em;
-  margin-left: 0.3em;
-  content: "";
-  vertical-align: super;
-  /* Use a background image to prevent screen readers from announcing the text. */
-  background-image: url(../../images/core/ee0000/required.svg);
-  background-repeat: no-repeat;
-  background-size: var(--input--required-mark-size) var(--input--required-mark-size);
+  margin-right: 0.15em;
+  margin-left: 0.15em;
+  content: "*";
+  color: var(--color-maximumred);
+  font-size: 0.875rem;
 }
 
 /**