diff --git a/app/images/icons/down-arrow.svg b/app/images/icons/down-arrow.svg
deleted file mode 100644
index e55f29129..000000000
--- a/app/images/icons/down-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" height="27" viewBox="0 0 27 27" width="27" xmlns="http://www.w3.org/2000/svg"><circle cx="13.5" cy="13.5" fill="#fff" fill-opacity=".25" r="13" stroke="#dcdde6"/><path d="m19.2 14.1-.7-.7-4.4 4.4v-10.8h-1v10.8l-4.4-4.4-.7.7 5.1 5.1.5.5.5-.5z" fill="#dcdde6"/></svg>
\ No newline at end of file
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 1db283e02..d8b356422 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -278,12 +278,7 @@ export default class AccountMenu extends Component {
         className="account-menu__scroll-button"
         onClick={this.handleScrollDown}
       >
-        <img
-          src="./images/icons/down-arrow.svg"
-          width="28"
-          height="28"
-          alt={this.context.t('scrollDown')}
-        />
+        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
       </div>
     );
   }
diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss
index 1d7bac0f7..b5bb8846d 100644
--- a/ui/components/app/account-menu/index.scss
+++ b/ui/components/app/account-menu/index.scss
@@ -224,7 +224,9 @@
     height: 28px;
     width: 28px;
     border-radius: 14px;
-    background: var(--color-text-default);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-alternative);
+    color: var(--color-icon-default);
     z-index: 201;
     cursor: pointer;
     opacity: 0.8;
diff --git a/ui/components/app/signature-request/signature-request-message/index.scss b/ui/components/app/signature-request/signature-request-message/index.scss
index 0a3f257b8..343bd0563 100644
--- a/ui/components/app/signature-request/signature-request-message/index.scss
+++ b/ui/components/app/signature-request/signature-request-message/index.scss
@@ -63,7 +63,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--color-background-alternative);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-alternative);
+    color: var(--color-icon-default);
     position: absolute;
     right: 24px;
     bottom: 12px;
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js
index 3c186f4c5..2a02cdcdd 100644
--- a/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js
@@ -77,12 +77,7 @@ export default class SignatureRequestMessage extends PureComponent {
         className="signature-request-message__scroll-button"
         data-testid="signature-request-scroll-button"
       >
-        <img
-          src="./images/icons/down-arrow.svg"
-          width="28"
-          height="28"
-          alt={this.context.t('scrollDown')}
-        />
+        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
       </div>
     );
   }