diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index f62332d0e1..4104c80be7 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -728,7 +728,7 @@ exports.initialize = function () {
         e.stopPropagation();
     });
 
-    $(".settings-header.mobile .icon-vector-chevron-left").on("click", function () {
+    $(".settings-header.mobile .fa-chevron-left").on("click", function () {
         $("#settings_page").find(".right").removeClass("show");
         $(this).parent().removeClass("slide-left");
     });
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 9d5292247e..9dd332f96f 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1202,7 +1202,7 @@ input[type=checkbox].inline-block {
     border-bottom: 1px solid hsl(0, 0%, 86%);
 }
 
-.settings-header.mobile .icon-vector-chevron-left {
+.settings-header.mobile .fa-chevron-left {
     float: left;
     position: relative;
     top: 14px;
diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.scss
index 3dc69e7fe6..01ebb2415d 100644
--- a/static/styles/subscriptions.scss
+++ b/static/styles/subscriptions.scss
@@ -404,7 +404,7 @@ form#add_new_subscription {
 }
 
 .subscriptions-header .fa-chevron-left,
-#settings_overlay_container .settings-header.mobile .icon-vector-chevron-left {
+#settings_overlay_container .settings-header.mobile .fa-chevron-left {
     position: relative;
     transform: translate(-50px, 0px);
     opacity: 0;
@@ -419,7 +419,7 @@ form#add_new_subscription {
 }
 
 .subscriptions-header.slide-left .fa-chevron-left,
-#settings_overlay_container .settings-header.mobile.slide-left .icon-vector-chevron-left {
+#settings_overlay_container .settings-header.mobile.slide-left .fa-chevron-left {
     transform: translate(-0px, 0px);
     opacity: 1;
 }
diff --git a/templates/zerver/app/settings_overlay.html b/templates/zerver/app/settings_overlay.html
index 2e9b4ffaca..d6b8815c34 100644
--- a/templates/zerver/app/settings_overlay.html
+++ b/templates/zerver/app/settings_overlay.html
@@ -1,6 +1,6 @@
 <div id="settings_page" class="new-style overlay-content modal-bg">
     <div class="settings-header mobile">
-        <div class="icon-vector-chevron-left"></div>
+        <i class="fa fa-chevron-left" aria-hidden="true"></i>
         <h1>{{ _('Settings') }}<span class="section"></span></h1>
         <div class="exit">
             <span class="exit-sign">&times;</span>
@@ -12,91 +12,91 @@
             <div class="center tab-container"></div>
             <ul class="normal-settings-list">
                 <li tabindex="0" data-section="your-account">
-                    <div class="icon icon-vector-user"></div>
+                    <i class="icon fa fa-user" aria-hidden="true"></i>
                     <div class="text">{{ _('Your account') }}</div>
                 </li>
                 <li tabindex="0" data-section="display-settings">
-                    <div class="icon icon-vector-time"></div>
+                    <i class="icon fa fa-clock-o" aria-hidden="true"></i>
                     <div class="text">{{ _('Display settings') }}</div>
                 </li>
                 <li tabindex="0" data-section="notifications">
-                    <div class="icon icon-vector-warning-sign"></div>
+                    <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
                     <div class="text">{{ _('Notifications') }}</div>
                 </li>
                 <li tabindex="0" data-section="your-bots">
-                    <div class="icon icon-vector-github"></div>
+                    <i class="icon fa fa-github" aria-hidden="true"></i>
                     <div class="text">{{ _('Your bots') }}</div>
                 </li>
                 <li tabindex="0" data-section="alert-words">
-                    <div class="icon icon-vector-book"></div>
+                    <i class="icon fa fa-book" aria-hidden="true"></i>
                     <div class="text">{{ _('Alert words') }}</div>
                 </li>
                 <li tabindex="0" data-section="uploaded-files">
-                    <div class="icon icon-vector-paper-clip"></div>
+                    <i class="icon fa fa-paperclip" aria-hidden="true"></i>
                     <div class="text">{{ _('Uploaded files') }}</div>
                 </li>
                 <li tabindex="0" data-section="muted-topics">
-                    <div class="icon icon-vector-eye-close"></div>
+                    <i class="icon fa fa-eye-slash" aria-hidden="true"></i>
                     <div class="text">{{ _('Muted topics') }}</div>
                 </li>
             </ul>
 
             <ul class="org-settings-list">
                 <li tabindex="0" data-section="organization-profile">
-                    <i class="icon icon-vector-lock"></i>
+                    <i class="icon fa fa-lock" aria-hidden="true"></i>
                     <div class="text">{{ _('Organization profile') }}</div>
                 </li>
                 <li tabindex="0" data-section="organization-settings">
-                    <i class="icon icon-vector-beaker"></i>
+                    <i class="icon fa fa-flask" aria-hidden="true"></i>
                     <div class="text">{{ _('Organization settings') }}</div>
                 </li>
                 <li tabindex="0" data-section="organization-permissions">
-                    <i class="icon icon-vector-lock"></i>
+                    <i class="icon fa fa-lock" aria-hidden="true"></i>
                     <div class="text">{{ _('Organization permissions') }}</div>
                 </li>
                 <li tabindex="0" data-section="emoji-settings">
-                    <i class="icon icon-vector-smile"></i>
+                    <i class="icon fa fa-smile-o" aria-hidden="true"></i>
                     <div class="text">{{ _('Custom emoji') }}</div>
                 </li>
                 <li tabindex="0" data-section="user-groups-admin">
-                    <i class="icon icon-vector-group"></i>
+                    <i class="icon fa fa-group" aria-hidden="true"></i>
                     <div class="text">{{ _('User groups') }}</div>
                 </li>
                 <li tabindex="0" data-section="auth-methods">
-                    <i class="icon icon-vector-lock"></i>
+                    <i class="icon fa fa-lock" aria-hidden="true"></i>
                     <div class="text">{{ _('Authentication methods') }}</div>
                 </li>
                 <li tabindex="0" data-section="user-list-admin">
-                    <i class="icon icon-vector-user"></i>
+                    <i class="icon fa fa-user" aria-hidden="true"></i>
                     <div class="text">{{ _('Users') }}</div>
                 </li>
                 {% if is_admin %}
                 <li tabindex="0" data-section="deactivated-users-admin">
-                    <i class="icon icon-vector-trash"></i>
+                    <i class="icon fa fa-trash-o" aria-hidden="true"></i>
                     <div class="text">{{ _('Deactivated users') }}</div>
                 </li>
                 {% endif %}
                 <li tabindex="0" data-section="bot-list-admin">
-                    <i class="icon icon-vector-github"></i>
+                    <i class="icon fa fa-github" aria-hidden="true"></i>
                     <div class="text">{{ _('Bots') }}</div>
                 </li>
                 <li tabindex="0" data-section="default-streams-list">
-                    <i class="icon icon-vector-exchange"></i>
+                    <i class="icon fa fa-exchange" aria-hidden="true"></i>
                     <div class="text">{{ _('Default streams') }}</div>
                 </li>
                 <li tabindex="0" data-section="filter-settings">
-                    <i class="icon icon-vector-font"></i>
+                    <i class="icon fa fa-font" aria-hidden="true"></i>
                     <div class="text">{{ _('Filter settings') }}</div>
                 </li>
                 {% if custom_profile_fields_enabled %}
                 <li tabindex="0" data-section="profile-field-settings">
-                    <i class="icon icon-vector-user"></i>
+                    <i class="icon fa fa-user" aria-hidden="true"></i>
                     <div class="text">{{ _('Custom profile fields') }}</div>
                 </li>
                 {% endif %}
                 {% if is_admin %}
                 <li tabindex="0" data-section="invites-list-admin">
-                    <i class="icon icon-vector-user"></i>
+                    <i class="icon fa fa-user" aria-hidden="true"></i>
                     <div class="text">{{ _('Invitations') }}</div>
                 </li>
                 {% endif %}