diff --git a/ui/components/ui/icon/icon-caret-left.js b/ui/components/ui/icon/icon-caret-left.js
index bd9e5f945..4fe22144e 100644
--- a/ui/components/ui/icon/icon-caret-left.js
+++ b/ui/components/ui/icon/icon-caret-left.js
@@ -6,6 +6,7 @@ const IconCaretLeft = ({
   color = 'currentColor',
   ariaLabel,
   className,
+  onClick,
 }) => (
   <svg
     width={size}
@@ -13,6 +14,7 @@ const IconCaretLeft = ({
     fill={color}
     className={className}
     aria-label={ariaLabel}
+    onClick={onClick}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
   >
@@ -33,6 +35,10 @@ IconCaretLeft.propTypes = {
    * An additional className to assign the Icon
    */
   className: PropTypes.string,
+  /**
+   * The onClick handler
+   */
+  onClick: PropTypes.func,
   /**
    * The aria-label of the icon for accessibility purposes
    */
diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss
index d2f35ce14..12a3e252a 100644
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/ui/pages/settings/contact-list-tab/index.scss
@@ -210,12 +210,12 @@
 .address-book-add-button {
   &__button {
     position: absolute;
-    top: 85px;
+    top: 80px;
     right: 16px;
     width: auto;
 
     @media screen and (max-width: $break-small) {
-      top: 16px;
+      top: 8px;
       right: 60px;
 
       &--hidden {
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index f547ae53a..67434a978 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -193,17 +193,11 @@
 
     @media screen and (max-width: $break-small) {
       display: block;
-      background-image: url('/images/caret-left-black.svg');
-      width: 18px;
-      height: 18px;
-      opacity: 0.5;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin-right: 16px;
+      margin-right: 8px;
       cursor: pointer;
 
       [dir='rtl'] & {
+        margin: 0 0 0 8px;
         transform: rotate(180deg);
       }
     }
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 0e91e570a..391ed082c 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Switch, Route, matchPath } from 'react-router-dom';
 import classnames from 'classnames';
 import TabBar from '../../components/app/tab-bar';
+import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
 
 import {
   ALERTS_ROUTE,
@@ -113,13 +114,16 @@ class SettingsPage extends PureComponent {
         })}
       >
         <div className="settings-page__header">
-          {currentPath !== SETTINGS_ROUTE && (
-            <div
-              className="settings-page__back-button"
-              onClick={() => history.push(backRoute)}
-            />
-          )}
           <div className="settings-page__header__title-container">
+            {currentPath !== SETTINGS_ROUTE && (
+              <IconCaretLeft
+                className="settings-page__back-button"
+                color="var(--color-icon-default)"
+                size={32}
+                onClick={() => history.push(backRoute)}
+              />
+            )}
+
             {this.renderTitle()}
 
             <div