diff --git a/web/shared/icons/user-circle-deactivated.svg b/web/shared/icons/user-circle-deactivated.svg
new file mode 100644
index 0000000000..ba48259b71
--- /dev/null
+++ b/web/shared/icons/user-circle-deactivated.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#000000" d="m 1.6109127,1.6109127 a 5.5,5.5 11.43398 0 0 0,7.7781746 5.5,5.5 11.43398 0 0 7.7781746,0 5.5,5.5 11.43398 0 0 0,-7.7781746 5.5,5.5 11.43398 0 0 -7.7781746,0 z M 2.4947962,2.4947962 A 4.25,4.25 0 0 1 7.9265363,2.0128035 L 2.0169467,7.9223931 A 4.25,4.25 0 0 1 2.4947962,2.4947962 Z M 3.0776069,8.9830533 8.9830533,3.0776069 A 4.25,4.25 0 0 1 8.5052038,8.5052038 4.25,4.25 0 0 1 3.0776069,8.9830533 Z"/>
+</svg>
diff --git a/web/src/activity_ui.ts b/web/src/activity_ui.ts
index 0527d9a4fb..bdc6dc778e 100644
--- a/web/src/activity_ui.ts
+++ b/web/src/activity_ui.ts
@@ -63,8 +63,9 @@ export function clear_for_testing(): void {
 export let update_presence_indicators = (): void => {
     $("[data-presence-indicator-user-id]").each(function () {
         const user_id = Number.parseInt($(this).attr("data-presence-indicator-user-id") ?? "", 10);
+        const is_deactivated = !people.is_active_user_for_popover(user_id || 0);
         assert(!Number.isNaN(user_id));
-        const user_circle_class = buddy_data.get_user_circle_class(user_id);
+        const user_circle_class = buddy_data.get_user_circle_class(user_id, is_deactivated);
         const user_circle_class_with_icon = `${user_circle_class} zulip-icon-${user_circle_class}`;
         $(this)
             .removeClass(
diff --git a/web/src/inbox_ui.ts b/web/src/inbox_ui.ts
index 20118e588e..449106cb62 100644
--- a/web/src/inbox_ui.ts
+++ b/web/src/inbox_ui.ts
@@ -298,8 +298,12 @@ function format_dm(
     let user_circle_class: string | false | undefined;
     let is_bot = false;
     if (recipient_ids.length === 1 && recipient_ids[0] !== undefined) {
-        is_bot = people.get_by_user_id(recipient_ids[0]).is_bot;
-        user_circle_class = is_bot ? false : buddy_data.get_user_circle_class(recipient_ids[0]);
+        const user_id = recipient_ids[0];
+        const is_deactivated = !people.is_active_user_for_popover(user_id);
+        is_bot = people.get_by_user_id(user_id).is_bot;
+        user_circle_class = is_bot
+            ? false
+            : buddy_data.get_user_circle_class(recipient_ids[0], is_deactivated);
     }
     const has_unread_mention = unread.num_unread_mentions_for_user_ids_strings(user_ids_string) > 0;
 
diff --git a/web/src/pm_list_data.ts b/web/src/pm_list_data.ts
index 5715076a95..bedb8d2258 100644
--- a/web/src/pm_list_data.ts
+++ b/web/src/pm_list_data.ts
@@ -97,7 +97,7 @@ export function get_conversations(search_string = ""): DisplayObject[] {
 
         if (!is_group) {
             const user_id = Number.parseInt(user_ids_string, 10);
-            user_circle_class = buddy_data.get_user_circle_class(user_id);
+            user_circle_class = buddy_data.get_user_circle_class(user_id, is_deactivated);
             const recipient_user_obj = people.get_by_user_id(user_id);
 
             if (recipient_user_obj.is_bot) {
diff --git a/web/src/recent_view_ui.ts b/web/src/recent_view_ui.ts
index 861639f6f5..0f94497f71 100644
--- a/web/src/recent_view_ui.ts
+++ b/web/src/recent_view_ui.ts
@@ -718,12 +718,13 @@ function format_conversation(conversation_data: ConversationData): ConversationC
         let user_circle_class;
         if (!is_group) {
             const user_id = Number.parseInt(last_msg.to_user_ids, 10);
+            const is_deactivated = !people.is_active_user_for_popover(user_id);
             const user = people.get_by_user_id(user_id);
             if (user.is_bot) {
                 // We display the bot icon rather than a user circle for bots.
                 is_bot = true;
             } else {
-                user_circle_class = buddy_data.get_user_circle_class(user_id);
+                user_circle_class = buddy_data.get_user_circle_class(user_id, is_deactivated);
             }
         }
 
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 9dc88d091f..f80671598c 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -155,12 +155,6 @@
         line-height: 1;
         /* ...which is approximately 8px at 15px/1em in Vlad's design. */
         font-size: 0.5333em;
-
-        &.user-circle-deactivated {
-            color: var(--color-user-circle-offline);
-            /* TODO: Check this font-size value. */
-            font-size: 0.85em;
-        }
     }
 
     .user_sidebar_entry.with_avatar {
diff --git a/web/styles/user_circles.css b/web/styles/user_circles.css
index a21de9d1d2..b9938e4426 100644
--- a/web/styles/user_circles.css
+++ b/web/styles/user_circles.css
@@ -15,3 +15,7 @@
 .user-circle-offline {
     color: var(--color-user-circle-offline);
 }
+
+.user-circle-deactivated {
+    color: var(--color-user-circle-deactivated);
+}
diff --git a/web/templates/pm_list_item.hbs b/web/templates/pm_list_item.hbs
index e6424dd659..2973a72ebc 100644
--- a/web/templates/pm_list_item.hbs
+++ b/web/templates/pm_list_item.hbs
@@ -4,12 +4,8 @@
         {{#if is_group}}
         <span class="conversation-partners-icon zulip-icon zulip-icon-dm-groups-3"></span>
         {{else}}
-        {{#if is_deactivated}}
-        <span class="conversation-partners-icon fa fa-ban {{user_circle_class}} user_circle"></span>
-        {{else}}
         <span class="conversation-partners-icon zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
         {{/if}}
-        {{/if}}
 
         <a href="{{url}}" class="conversation-partners">
             <span class="conversation-partners-list">{{recipients}}</span>
diff --git a/web/templates/presence_row.hbs b/web/templates/presence_row.hbs
index 6f040cfc79..2d4ed1a950 100644
--- a/web/templates/presence_row.hbs
+++ b/web/templates/presence_row.hbs
@@ -1,11 +1,7 @@
 <li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if has_status_text}}with_status{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
     <div class="selectable_sidebar_block">
         {{#if user_list_style.WITH_STATUS}}
-            {{#if (eq user_circle_class "user-circle-deactivated")}}
-            <span class="fa fa-ban {{user_circle_class}} user-circle"></span>
-            {{else}}
             <span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
-            {{/if}}
             <a class="user-presence-link" href="{{href}}">
                 <div class="user-name-and-status-wrapper">
                     <div class="user-name-and-status-emoji">
@@ -19,11 +15,7 @@
             <div class="user-profile-picture-container">
                 <div class="user-profile-picture avatar-preload-background">
                     <img loading="lazy" src="{{profile_picture}}"/>
-                    {{#if (eq user_circle_class "user-circle-deactivated")}}
-                    <span class="fa fa-ban {{user_circle_class}} user-circle"></span>
-                    {{else}}
                     <span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
-                    {{/if}}
                 </div>
             </div>
             <a class="user-presence-link" href="{{href}}">