diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index e5994c0924..c4f336eb7f 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -26,13 +26,10 @@ $user_status_emoji_width: 24px;
     overflow: auto;
 }
 
-.buddy-list-section-toggle.fa-caret-right {
-    width: 7px;
-    transition: rotate 140ms linear;
-    /* The triangle icon has asymmetrical padding on it, so
-       when it rotates down it would be too high without
-       this padding. */
-    padding-left: 2px;
+.buddy-list-section-toggle.zulip-icon-heading-triangle-right {
+    transition:
+        opacity 140ms linear,
+        rotate 140ms linear;
 
     &.rotate-icon-down {
         rotate: 90deg;
@@ -43,6 +40,11 @@ $user_status_emoji_width: 24px;
     }
 }
 
+.buddy-list-section-toggle {
+    color: var(--color-text-sidebar-heading);
+    opacity: var(--opacity-sidebar-heading-icon);
+}
+
 .buddy-list-section-container {
     margin-bottom: 10px;
 
@@ -230,13 +232,30 @@ $user_status_emoji_width: 24px;
     top: 0;
     z-index: 1;
     color: var(--color-text-default);
+    border-radius: 4px;
+    padding-left: 4px;
+
+    &:hover {
+        background-color: var(--color-buddy-list-highlighted-user);
+        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
+
+        .buddy-list-section-toggle,
+        .buddy-list-heading {
+            opacity: var(--opacity-sidebar-heading-hover);
+        }
+    }
 }
 
 .buddy-list-heading {
     user-select: none;
-    font-weight: 600;
     margin: 0;
     padding: 5px 5px 5px 0;
+    color: var(--color-text-sidebar-heading);
+    font-size: inherit;
+    font-weight: var(--font-weight-sidebar-heading);
+    letter-spacing: var(--letter-spacing-sidebar-heading);
+    opacity: var(--opacity-sidebar-heading);
+    transition: opacity 140ms linear;
 }
 
 .buddy-list-subsection-header.no-display {
diff --git a/web/templates/buddy_list/section_header.hbs b/web/templates/buddy_list/section_header.hbs
index 8dabbd1ac9..6161cd1f5b 100644
--- a/web/templates/buddy_list/section_header.hbs
+++ b/web/templates/buddy_list/section_header.hbs
@@ -1,4 +1,4 @@
 <h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
     {{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
 </h5>
-<i class="buddy-list-section-toggle fa fa-sm fa-caret-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>
+<i class="buddy-list-section-toggle zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>