diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
index b27f7273..a011de9e 100644
--- a/src/components/DocFooter.jsx
+++ b/src/components/DocFooter.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { ReactComponent as Pencil } from '../images/pencil.svg'
import styles from './DocFooter.module.scss'
const DocFooter = ({ post }) => (
@@ -9,7 +10,7 @@ const DocFooter = ({ post }) => (
post.parent.relativePath
}`}
>
- Edit on GitHub
+ Edit this page on GitHub
)
diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss
index e55890aa..6af86c56 100644
--- a/src/components/DocFooter.module.scss
+++ b/src/components/DocFooter.module.scss
@@ -13,5 +13,17 @@
font-family: $font-family-button;
text-transform: uppercase;
color: $brand-grey-light;
+
+ &:hover,
+ &:focus {
+ color: $brand-pink;
+ }
+
+ svg {
+ display: inline-block;
+ margin-right: $spacer / 10;
+ margin-bottom: -1px;
+ fill: $brand-grey-light;
+ }
}
}
diff --git a/src/images/pencil.svg b/src/images/pencil.svg
new file mode 100644
index 00000000..9a0ed66c
--- /dev/null
+++ b/src/images/pencil.svg
@@ -0,0 +1,3 @@
+