diff --git a/web/src/stream_color.js b/web/src/stream_color.js
index c70270dc5d..a6d338e9c1 100644
--- a/web/src/stream_color.js
+++ b/web/src/stream_color.js
@@ -35,9 +35,8 @@ function update_table_stream_color(table, stream_name, color) {
     }
 }
 
-function update_stream_sidebar_swatch_color(id, color) {
-    $(`#stream_sidebar_swatch_${CSS.escape(id)}`).css("background-color", color);
-    $(`#stream_sidebar_privacy_swatch_${CSS.escape(id)}`).css("color", color);
+function update_stream_privacy_color(id, color) {
+    $(`.stream-privacy-${CSS.escape(id)}`).css("color", color);
 }
 
 function update_historical_message_color(stream_name, color) {
@@ -95,7 +94,7 @@ export function update_stream_color(sub, color, {update_historical = false} = {}
     if (update_historical) {
         update_historical_message_color(sub.name, color);
     }
-    update_stream_sidebar_swatch_color(stream_id, color);
+    update_stream_privacy_color(stream_id, color);
     message_view_header.colorize_message_view_header();
 }
 
diff --git a/web/src/stream_settings_data.js b/web/src/stream_settings_data.js
index e49496ed32..488b14478c 100644
--- a/web/src/stream_settings_data.js
+++ b/web/src/stream_settings_data.js
@@ -80,6 +80,7 @@ export function get_unmatched_streams_for_notification_settings() {
         if (make_table_row) {
             settings_values.stream_name = row.name;
             settings_values.stream_id = row.stream_id;
+            settings_values.color = row.color;
             settings_values.invite_only = row.invite_only;
             settings_values.is_web_public = row.is_web_public;
 
diff --git a/web/templates/recent_topic_row.hbs b/web/templates/recent_topic_row.hbs
index 46f72992d4..dca2f87273 100644
--- a/web/templates/recent_topic_row.hbs
+++ b/web/templates/recent_topic_row.hbs
@@ -6,7 +6,7 @@
                 <span class="fa fa-envelope"></span>
                 <a href="{{pm_url}}">Direct messages</a>
                 {{else}}
-                <span id="stream_sidebar_privacy_swatch_{{stream_id}}" class="stream-privacy filter-icon" style="color: {{stream_color}}">
+                <span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
                     {{> stream_privacy }}
                 </span>
                 <a href="{{topic_url}}">{{stream}}</a>
diff --git a/web/templates/settings/stream_specific_notification_row.hbs b/web/templates/settings/stream_specific_notification_row.hbs
index 1d14551dd3..9c0e7946e8 100644
--- a/web/templates/settings/stream_specific_notification_row.hbs
+++ b/web/templates/settings/stream_specific_notification_row.hbs
@@ -1,6 +1,6 @@
 <tr class="stream-notifications-row {{#if muted}}control-label-disabled{{/if}}" data-stream-id="{{stream.stream_id}}">
     <td>
-        <span id="stream_privacy_swatch_{{stream.stream_id}}" class="stream-privacy filter-icon">
+        <span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
             {{> ../stream_privacy
               invite_only=stream.invite_only
               is_web_public=stream.is_web_public }}
diff --git a/web/templates/stream_sidebar_actions.hbs b/web/templates/stream_sidebar_actions.hbs
index 816b011176..67684b6658 100644
--- a/web/templates/stream_sidebar_actions.hbs
+++ b/web/templates/stream_sidebar_actions.hbs
@@ -2,7 +2,7 @@
 <ul class="nav nav-list streams_popover" data-stream-id="{{ stream.stream_id }}" data-name="{{ stream.name }}">
     <li>
         <p class="topic-name">
-            <span id="stream_sidebar_privacy_swatch_{{stream.stream_id}}" class="stream-privacy filter-icon" style="color: {{stream.color}}">
+            <span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
                 {{> stream_privacy
                   invite_only=stream.invite_only
                   is_web_public=stream.is_web_public }}
diff --git a/web/templates/stream_sidebar_row.hbs b/web/templates/stream_sidebar_row.hbs
index 81dd50c0ac..e1da89c012 100644
--- a/web/templates/stream_sidebar_row.hbs
+++ b/web/templates/stream_sidebar_row.hbs
@@ -4,7 +4,7 @@
     <div class="bottom_left_row">
         <div class="subscription_block selectable_sidebar_block">
 
-            <span id="stream_sidebar_privacy_swatch_{{id}}" class="stream-privacy filter-icon" style="color: {{color}}">
+            <span class="stream-privacy-{{id}} stream-privacy filter-icon" style="color: {{color}}">
                 {{> stream_privacy }}
             </span>
 
diff --git a/web/templates/user_stream_list_item.hbs b/web/templates/user_stream_list_item.hbs
index f0c410cb2c..74d4e6a4a8 100644
--- a/web/templates/user_stream_list_item.hbs
+++ b/web/templates/user_stream_list_item.hbs
@@ -1,6 +1,6 @@
 <tr data-stream-id="{{stream_id}}">
     <td class="subscription_list_stream">
-        <span id="stream_sidebar_privacy_swatch_{{stream_id}}" class="stream-privacy filter-icon" style="color: {{stream_color}}">
+        <span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
             {{> stream_privacy }}
         </span>
         <a class = "stream_list_item" href="{{stream_edit_url}}">{{name}}</a>
diff --git a/web/tests/stream_data.test.js b/web/tests/stream_data.test.js
index 95edfb0ba2..4700b4fcf5 100644
--- a/web/tests/stream_data.test.js
+++ b/web/tests/stream_data.test.js
@@ -541,6 +541,7 @@ test("notifications", () => {
     const india = {
         stream_id: 102,
         name: "India",
+        color: "#000080",
         subscribed: true,
         invite_only: false,
         is_web_public: false,
@@ -610,6 +611,7 @@ test("notifications", () => {
     const canada = {
         stream_id: 103,
         name: "Canada",
+        color: "#d80621",
         subscribed: true,
         invite_only: true,
         is_web_public: false,
@@ -670,6 +672,7 @@ test("notifications", () => {
             is_web_public: false,
             stream_name: "Canada",
             stream_id: 103,
+            color: "#d80621",
         },
         {
             desktop_notifications: true,
@@ -681,6 +684,7 @@ test("notifications", () => {
             is_web_public: false,
             stream_name: "India",
             stream_id: 102,
+            color: "#000080",
         },
     ];