diff --git a/app/components/class-field-description.hbs b/app/components/class-field-description.hbs
index f888b92d3..599c3fafd 100644
--- a/app/components/class-field-description.hbs
+++ b/app/components/class-field-description.hbs
@@ -1,9 +1,5 @@
 <section class='{{@type}}'>
-  {{!-- TODO: Fix this link for a11y --}}
-  <h3 class='class-field-description--link' data-anchor='{{@field.name}}' role='link' {{on 'click' (fn this.updateAnchor @field.name)}}>
-    <a class='anchor' {{!-- template-lint-disable link-href-attributes --}}>
-      {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}}
-    </a>
+  <h3 data-anchor='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -19,6 +15,10 @@
     {{#if @field.deprecated}}
       <span class='access'>deprecated</span>
     {{/if}}
+    {{!-- TODO: Fix this link for a11y --}}
+    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+      {{svg-jar 'link' width='20px' height='20px'}}
+    </a>
   </h3>
   {{#if @model.module}}
     <div class='attributes'>
diff --git a/app/styles/app.css b/app/styles/app.css
index 3c700eb25..342a87e32 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -90,6 +90,24 @@ li.toc-heading:first-child {
   margin-top: 0;
 }
 
+a.class-field-description--link {
+  margin-left: 12px;
+  vertical-align: middle;
+  background: none;
+  cursor: pointer;
+}
+
+a.class-field-description--link svg {
+  height: 18px;
+  fill: var(--color-gray-600);
+  transform: rotate(45deg);
+  vertical-align: middle;
+}
+
+a.class-field-description--link:hover svg {
+  fill: var(--color-brand);
+}
+
 @media (min-width: 845px) {
   .es-header {
     padding: 0 var(--spacing-4);
diff --git a/public/assets/images/fa-link.svg b/public/assets/images/fa-link.svg
deleted file mode 100644
index 2a91dc245..000000000
--- a/public/assets/images/fa-link.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- Source https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/link.svg -->
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/>
-</svg>
diff --git a/public/assets/images/link.svg b/public/assets/images/link.svg
new file mode 100644
index 000000000..177175013
--- /dev/null
+++ b/public/assets/images/link.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"/>
+</svg>
\ No newline at end of file
diff --git a/tests/acceptance/anchors-test.js b/tests/acceptance/anchors-test.js
index e4b9f6498..d1ac6dec4 100644
--- a/tests/acceptance/anchors-test.js
+++ b/tests/acceptance/anchors-test.js
@@ -11,7 +11,9 @@ module('Acceptance | Creating Anchors', function (hooks) {
     await click(element);
     assert.equal(
       currentURL(),
-      `/ember/1.0/classes/Container/properties?anchor=${element.innerText.trim()}`
+      `/ember/1.0/classes/Container/properties?anchor=${element.getAttribute(
+        'data-test-anchor'
+      )}`
     );
   });
 });
diff --git a/tests/integration/components/class-field-description-test.js b/tests/integration/components/class-field-description-test.js
index 4657ab15b..46807a880 100644
--- a/tests/integration/components/class-field-description-test.js
+++ b/tests/integration/components/class-field-description-test.js
@@ -2,13 +2,7 @@
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import {
-  render,
-  click,
-  findAll,
-  find,
-  triggerEvent,
-} from '@ember/test-helpers';
+import { render, click, findAll, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | class field description', function (hooks) {
@@ -37,29 +31,6 @@ module('Integration | Component | class field description', function (hooks) {
     assert.dom(findAll('.args')[0]).hasText('(param1, param2, param3)');
   });
 
-  test('On hover -- the link icon shows up', async function (assert) {
-    this.set('type', 'method');
-    this.set(
-      'field',
-      EmberObject.create({
-        access: 'public',
-        deprecated: true,
-        name: 'concat',
-        description: 'concatenates',
-        params: [{ name: 'param1' }, { name: 'param2' }, { name: 'param3' }],
-      })
-    );
-
-    await render(
-      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
-    );
-
-    await triggerEvent('.class-field-description--link', 'mouseenter');
-    assert
-      .dom('.class-field-description--link-hover')
-      .exists('The link icon appears when hovering on the method text');
-  });
-
   test('it calls the provided action on link-click with the field name as an arg', async function (assert) {
     this.set('updateAnchor', (name) => {
       assert.equal(