diff --git a/core/misc/icons/ee0000/required.svg b/core/misc/icons/ee0000/required.svg
new file mode 100644
index 000000000000..f7882d6df9b9
--- /dev/null
+++ b/core/misc/icons/ee0000/required.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#EE0000"  d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 2d9c97158ae9..184b78a2ea04 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -82,11 +82,16 @@ label.option {
 }
 
 .form-required:after {
-  color: #e00;
-  /* Use a Unicode symbol to prevent screen readers from announcing the text. */
-  content: " \204E ";
-  line-height: 1;
+  content: '';
   vertical-align: super;
+  display: inline-block;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url(../../../misc/icons/ee0000/required.svg);
+  background-repeat: no-repeat;
+  background-size: 6px 6px;
+  width: 6px;
+  height: 6px;
+  margin: 0 0.3em;
 }
 
 abbr.tabledrag-changed,
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index b2bd088c8ae0..6470a33e8240 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -439,8 +439,7 @@ h1.site-name {
   background: rgba(255, 255, 255, 0.8);
 }
 .region-header .form-required:after {
-  color: #eee;
-  color: rgba(255, 255, 255, 0.7);
+  background-image: url(../images/required.svg);
 }
 /* Region header block menus. */
 .region-header .block-menu {
diff --git a/core/themes/bartik/images/required.svg b/core/themes/bartik/images/required.svg
new file mode 100644
index 000000000000..04e1865bf2cb
--- /dev/null
+++ b/core/themes/bartik/images/required.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#ffffff" fill-opacity="0.7" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>
diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
index 3ed34901ee74..5dacb03f6a2a 100644
--- a/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -80,10 +80,10 @@ label[for] {
   background-color: #fcf4f2;
 }
 .form-required:after {
-  font-weight: bold;
-  color: #e62600;
-  font-size: 1.1em;
-  padding-left: 2px;
+  background-image: url(../../images/required.svg);
+  background-size: 7px 7px;
+  width: 7px;
+  height: 7px;
 }
 
 
diff --git a/core/themes/seven/images/required.svg b/core/themes/seven/images/required.svg
new file mode 100644
index 000000000000..584c13c49aab
--- /dev/null
+++ b/core/themes/seven/images/required.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e62600" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>