diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 4ec841d..6627118 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1104,6 +1104,30 @@ function template_preprocess_item_list(&$variables) {
 }
 
 /**
+ * Prepares variables for feed icon templates.
+ *
+ * Default template: feed-icon.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - url: An internal system path or a fully qualified external URL of the
+ *     feed.
+ *   - title: A descriptive title of the feed.
+ */
+function template_preprocess_feed_icon(&$variables) {
+  $text = t('Subscribe to !feed-title', array('!feed-title' => $variables['title']));
+  $variables['icon'] = array(
+    '#theme' => 'image__feed_icon',
+    '#uri' => 'core/misc/feed.png',
+    '#width' => 16,
+    '#height' => 16,
+    '#alt' => $text,
+  );
+  // Stripping tags because that's what l() used to do.
+  $variables['attributes']['title'] = strip_tags($text);
+}
+
+/**
  * Returns HTML for an indentation div; used for drag and drop tables.
  *
  * @param $variables
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index be759ab..f7af1e4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -162,17 +162,6 @@ abbr.ajax-changed {
 }
 
 /**
- * Feed Icon.
- * Markup generated by feed-icon.html.twig.
- */
-.feed-icon {
-  background: url(../../../misc/feed.png) no-repeat;
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-/**
  * Markup generated by pager.html.twig.
  */
 .pager__items {
diff --git a/core/modules/system/templates/feed-icon.html.twig b/core/modules/system/templates/feed-icon.html.twig
index d9197cc..08d8c31 100644
--- a/core/modules/system/templates/feed-icon.html.twig
+++ b/core/modules/system/templates/feed-icon.html.twig
@@ -5,13 +5,31 @@
  *
  * Available variables:
  * - url: An internal system path or a fully qualified external URL of the feed.
+ * - icon: The rendered HTML (<img> tag) for the feed icon image.
  * - attributes: Remaining HTML attributes for the feed link.
  *   - title: A descriptive title of the feed link.
  *   - class: HTML classes to be applied to the feed link.
  *
+ * @see template_preprocess_feed_icon()
+ *
  * @ingroup themeable
  */
 #}
 <a href="{{ url }}"{{ attributes }}>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <switch>
+      <g>
+        <rect fill="#ff9900" width="16" height="16" x="0" y="0" rx="3" ry="3"/>
+        <g fill="#ffffff">
+          <circle cx="4.25" cy="11.812" r="1.5"/>
+          <path d="M10,13.312H7.875c0-2.83-2.295-5.125-5.125-5.125l0,0V6.062C6.754,6.062,10,9.308,10,13.312z"/>
+          <path d="M11.5,13.312c0-4.833-3.917-8.75-8.75-8.75V2.375c6.041,0,10.937,4.896,10.937,10.937H11.5z"/>
+        </g>
+      </g>
+      <foreignObject>
+        {{ icon }}
+      </foreignObject>
+    </switch>
+  </svg>
   <span>{{ 'Subscribe to @title'|t({'@title': title}) }}</span>
 </a>
diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css
index 7bb2cb1..0c3899e 100644
--- a/core/themes/bartik/css/base/elements.css
+++ b/core/themes/bartik/css/base/elements.css
@@ -126,10 +126,16 @@ blockquote:after {
 blockquote > p:first-child {
   display: inline;
 }
-a.feed-icon {
+.feed-icon {
   display: block;
   margin: 25px 0 0 0;
 }
+.feed-icon--background {
+  fill: #f90;
+}
+.feed-icon--element {
+  fill: #fff;
+}
 img {
   max-width: 100%;
   height: auto;
diff --git a/core/themes/classy/templates/system/feed-icon.html.twig b/core/themes/classy/templates/system/feed-icon.html.twig
index 57d8433..3db9632 100644
--- a/core/themes/classy/templates/system/feed-icon.html.twig
+++ b/core/themes/classy/templates/system/feed-icon.html.twig
@@ -5,13 +5,31 @@
  *
  * Available variables:
  * - url: An internal system path or a fully qualified external URL of the feed.
+ * - icon: The rendered HTML (<img> tag) for the feed icon image.
  * - attributes: Remaining HTML attributes for the feed link.
  *   - title: A descriptive title of the feed link.
  *   - class: HTML classes to be applied to the feed link.
  *
+ * @see template_preprocess_feed_icon()
+ *
  * @ingroup themeable
  */
 #}
 <a href="{{ url }}"{{ attributes.addClass('feed-icon') }}>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <switch>
+      <g>
+        <rect class="feed-icon--background" width="16" height="16" x="0" y="0" rx="3" ry="3"/>
+        <g class="feed-icon--element" >
+          <circle cx="4.25" cy="11.812" r="1.5"/>
+          <path d="M10,13.312H7.875c0-2.83-2.295-5.125-5.125-5.125l0,0V6.062C6.754,6.062,10,9.308,10,13.312z"/>
+          <path d="M11.5,13.312c0-4.833-3.917-8.75-8.75-8.75V2.375c6.041,0,10.937,4.896,10.937,10.937H11.5z"/>
+        </g>
+      </g>
+      <foreignObject>
+        {{ icon }}
+      </foreignObject>
+    </switch>
+  </svg>
   <span class="visually-hidden">{{ 'Subscribe to @title'|t({'@title': title}) }}</span>
 </a>