diff --git a/web/e2e-tests/stars.test.ts b/web/e2e-tests/stars.test.ts
index 83d1e64a6c..e7480e53ec 100644
--- a/web/e2e-tests/stars.test.ts
+++ b/web/e2e-tests/stars.test.ts
@@ -7,7 +7,7 @@ import * as common from "./lib/common";
 const message = "test star";
 
 async function stars_count(page: Page): Promise<number> {
-    return (await page.$$("#zhome .fa-star:not(.empty-star)")).length;
+    return (await page.$$("#zhome .zulip-icon-star-filled:not(.empty-star)")).length;
 }
 
 async function toggle_test_star_message(page: Page): Promise<void> {
@@ -49,7 +49,7 @@ async function stars_test(page: Page): Promise<void> {
     assert.strictEqual(await stars_count(page), 0, "Unexpected already starred message(s).");
 
     await toggle_test_star_message(page);
-    await page.waitForSelector("#zhome .fa-star", {visible: true});
+    await page.waitForSelector("#zhome .zulip-icon-star-filled", {visible: true});
     assert.strictEqual(
         await stars_count(page),
         1,
diff --git a/web/src/message_live_update.js b/web/src/message_live_update.js
index d5033dd69a..193cf09727 100644
--- a/web/src/message_live_update.js
+++ b/web/src/message_live_update.js
@@ -52,10 +52,10 @@ export function update_starred_view(message_id, new_value) {
         const $elt = $row.find(".star");
         const $star_container = $row.find(".star_container");
         if (starred) {
-            $elt.addClass("fa-star").removeClass("fa-star-o");
+            $elt.addClass("zulip-icon-star-filled").removeClass("zulip-icon-star");
             $star_container.removeClass("empty-star");
         } else {
-            $elt.removeClass("fa-star").addClass("fa-star-o");
+            $elt.removeClass("zulip-icon-star-filled").addClass("zulip-icon-star");
             $star_container.addClass("empty-star");
         }
         const data_template_id = starred
diff --git a/web/templates/edit_content_button.hbs b/web/templates/edit_content_button.hbs
index d449408536..9b3715b6ba 100644
--- a/web/templates/edit_content_button.hbs
+++ b/web/templates/edit_content_button.hbs
@@ -1,7 +1,7 @@
 {{#if is_content_editable}}
-<i class="fa fa-pencil edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
+<i class="zulip-icon zulip-icon-edit edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
 {{else if can_move_message}}
-<i class="fa fa-arrows move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
+<i class="zulip-icon zulip-icon-move move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
 {{else}}
-<i class="fa fa-file-code-o view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-message-id="{{msg_id}}"></i>
+<i class="zulip-icon zulip-icon-source view_source_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'View message source' }} (e)" data-message-id="{{msg_id}}"></i>
 {{/if}}
diff --git a/web/templates/message_controls.hbs b/web/templates/message_controls.hbs
index 8dbea56e37..d7d6e6f673 100644
--- a/web/templates/message_controls.hbs
+++ b/web/templates/message_controls.hbs
@@ -5,13 +5,13 @@
 
     {{#unless msg/sent_by_me}}
     <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
-        <i class="fa fa-smile-o" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
+        <i class="zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
     </div>
     {{/unless}}
 
     {{#unless msg/locally_echoed}}
     <div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
-        <i class="zulip-icon zulip-icon-ellipsis-v-solid" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
+        <i class="zulip-icon zulip-icon-more-vertical" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
     </div>
     {{/unless}}
 
@@ -27,7 +27,7 @@
 
     {{#unless msg/locally_echoed}}
     <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
-        <i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}"></i>
+        <i role="button" tabindex="0" class="star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
     </div>
     {{/unless}}
 
diff --git a/web/templates/message_reactions.hbs b/web/templates/message_reactions.hbs
index c6c1ee3b3a..6f63d3d9e4 100644
--- a/web/templates/message_reactions.hbs
+++ b/web/templates/message_reactions.hbs
@@ -2,6 +2,6 @@
     {{> message_reaction}}
 {{/each}}
 <div class="reaction_button" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)">
-    <i class="fa fa-smile-o" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
+    <i class="zulip-icon zulip-icon-smile" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
     <div class="message_reaction_count">+</div>
 </div>