diff --git a/starterkits/less/less/component/form.less b/starterkits/less/less/component/form.less
index 628c957..245dd67 100644
--- a/starterkits/less/less/component/form.less
+++ b/starterkits/less/less/component/form.less
@@ -71,9 +71,11 @@
 // Use CSS for required mark.
 // Inspired from https://www.drupal.org/node/2152217.
 .form-required:after {
-  color: #e00;
-  /* Use a Unicode symbol to prevent screen-readers from announcing the text. */
-  content: " \204E ";
-  line-height: 1;
-  vertical-align: super;
+  content:"";
+  background-image: url(../../required.svg);
+  display: inline-block;
+  line-height:1;
+  background-size: 10px 7px;
+  width: 10px;
+  height: 7px;
 }
diff --git a/starterkits/less/required.svg b/starterkits/less/required.svg
new file mode 100644
index 0000000..f7882d6
--- /dev/null
+++ b/starterkits/less/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>