--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -245,18 +245,16 @@ RuleEditor.prototype = {
     }
 
     // Create the font editor toggle icon visible on hover.
     if (this.ruleView.showFontEditor) {
       this.fontSwatch = createChild(this.element, "div", {
         class: "ruleview-fontswatch"
       });
 
-      // TODO: replace with tool icon and use this as visually hidden a11y text.
-      this.fontSwatch.textContent = "Aa";
       this.fontSwatch.addEventListener("click", this._onFontSwatchClick);
     }
   },
 
   /**
    * Handler for clicks on font swatch icon.
    * Toggles the selected state of the the current rule for the font editor.
    *

--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -113,16 +113,17 @@ devtools.jar:
     skin/firebug-theme.css (themes/firebug-theme.css)
     skin/toolbars.css (themes/toolbars.css)
     skin/toolbox.css (themes/toolbox.css)
     skin/tooltips.css (themes/tooltips.css)
     skin/images/add.svg (themes/images/add.svg)
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
+    skin/images/font-swatch.svg (themes/images/font-swatch.svg)
     skin/images/grid.svg (themes/images/grid.svg)
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/copy.svg (themes/images/copy.svg)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)

new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/font-swatch.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg viewBox="0 0 16 11" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" fill="context-fill" d="M2,0 L14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,9 C16,10.1045695 15.1045695,11 14,11 L2,11 C0.8954305,11 1.3527075e-16,10.1045695 0,9 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M6.84277344,8.70001221 L8.27978516,8.70001221 L6.078125,2.35870361 L4.51806641,2.35870361 L2.31640625,8.70001221 L3.64794922,8.70001221 L4.13574219,7.18829346 L6.36376953,7.18829346 L6.84277344,8.70001221 Z M5.21679688,3.67706299 L4.42138672,6.16436768 L6.08251953,6.16436768 L5.29589844,3.67706299 L5.21679688,3.67706299 Z M10.4946289,8.77471924 C9.56298828,8.77471924 8.90820312,8.20343018 8.90820312,7.31573486 C8.90820312,6.43682861 9.58056641,5.92706299 10.784668,5.85675049 L11.9580078,5.78643799 L11.9580078,5.39093018 C11.9580078,4.9866333 11.6679688,4.75811768 11.140625,4.75811768 C10.6791992,4.75811768 10.371582,4.9163208 10.2661133,5.20635986 L9.08837891,5.20635986 C9.171875,4.30987549 9.99365234,3.74737549 11.2109375,3.74737549 C12.4941406,3.74737549 13.2192383,4.3538208 13.2192383,5.39093018 L13.2192383,8.70001221 L11.9799805,8.70001221 L11.9799805,8.06719971 L11.9008789,8.06719971 C11.6503906,8.51104736 11.1230469,8.77471924 10.4946289,8.77471924 Z M10.9165039,7.81231689 C11.5097656,7.81231689 11.9580078,7.43438721 11.9580078,6.94219971 L11.9580078,6.58624268 L10.9780273,6.64776611 C10.4287109,6.68731689 10.1606445,6.8850708 10.1606445,7.23223877 C10.1606445,7.59259033 10.4726562,7.81231689 10.9165039,7.81231689 Z"></path>
+</svg>

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -517,32 +517,33 @@
   background-size: 1em;
 }
 
 .ruleview-rule:not(:hover) .ruleview-fontswatch:not(.active) {
   visibility: hidden;
 }
 
 .ruleview-fontswatch {
-  background-color: var(--grey-40);
-  background-size: 1em;
-  color: white;
-  cursor: pointer;
+  position: absolute;
+  width: 1.45em;
+  height: 1em;
+  right: 1.5em;
+  bottom: 0.5em;
+  font-size: 1em;
 
-  font-size: .8em;
-  position: absolute;
-  right: 2em;
-  bottom: .5em;
-  padding: .1em .2em;
-
+  background: url("chrome://devtools/skin/images/font-swatch.svg");
+  -moz-context-properties: fill;
+  fill: var(--grey-40);
+  background-size: contain;
+  cursor: pointer;
   -moz-user-select: none;
 }
 
 .ruleview-fontswatch.active {
-  background-color: var(--blue-50);
+  fill: var(--blue-50);
 }
 
 .ruleview-shapeswatch {
   background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
   -moz-context-properties: fill;
   fill: var(--rule-shape-toggle-color);
   border-radius: 0;
   background-size: 1em;