diff --git a/images/icons/v3/bell/bell-slash-fill.svg b/images/icons/v3/bell/bell-slash-fill.svg
new file mode 100644
index 00000000000..2d4ec727c50
--- /dev/null
+++ b/images/icons/v3/bell/bell-slash-fill.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.568 1.568a.73.73 0 0 1 1.031 0L18.432 17.4a.73.73 0 1 1-1.03 1.031L1.567 2.6a.73.73 0 0 1 0-1.031Zm2.734 5.533c-.115 3.009-.73 4.158-1.247 4.77a4.91 4.91 0 0 1-.407.417l-.066.061a5.241 5.241 0 0 0-.337.33c-.28.307-.474.67-.474 1.239 0 .936.747 1.707 1.683 1.707h9.372L4.302 7.101Zm13.524 7.926c.252-.3.403-.688.403-1.109 0-.569-.194-.931-.473-1.239a5.507 5.507 0 0 0-.337-.33h-.001l-.03-.028-.036-.033a4.783 4.783 0 0 1-.407-.417c-.522-.617-1.143-1.781-1.25-4.85C15.582 3.778 13.02 1.459 10 1.459a5.68 5.68 0 0 0-4.058 1.685l11.884 11.884ZM7.458 17.08a.417.417 0 0 1 .36-.205h4.364a.417.417 0 0 1 .364.62c-.496.89-1.44 1.463-2.546 1.463-1.105 0-2.05-.573-2.546-1.463a.417.417 0 0 1 .004-.414Z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/stylesheets/components/CallingButton.scss b/stylesheets/components/CallingButton.scss
index c7360bedf46..a31ab97f0f5 100644
--- a/stylesheets/components/CallingButton.scss
+++ b/stylesheets/components/CallingButton.scss
@@ -30,31 +30,29 @@
       }
     }
 
-    @mixin calling-button-icon-on($icon) {
-      @include calling-button-icon($icon, $color-white, $color-gray-75);
+    @mixin calling-button-icon-highlighted($icon) {
+      @include calling-button-icon($icon, $color-gray-15, $color-gray-90);
     }
 
-    @mixin calling-button-icon-off($icon) {
-      @include calling-button-icon($icon, $color-white-alpha-40, $color-white);
+    @mixin calling-button-icon-regular($icon) {
+      @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
       backdrop-filter: blur(10px);
     }
 
     @mixin calling-button-icon-disabled($icon) {
-      @include calling-button-icon($icon, $color-gray-45, $color-white);
-      opacity: 0.2;
+      @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
+      opacity: 0.4;
     }
 
-    // If the on/off states seem backwards, it's because this button reflects "is audio
-    //   muted?", not "is audio on?".
     &--audio {
       $icon: '../images/icons/v3/mic/mic-slash-fill-light.svg';
       &--on {
-        @include calling-button-icon-off(
+        @include calling-button-icon-regular(
           '../images/icons/v3/mic/mic-fill-light.svg'
         );
       }
       &--off {
-        @include calling-button-icon-on($icon);
+        @include calling-button-icon-highlighted($icon);
       }
       &--disabled {
         @include calling-button-icon-disabled($icon);
@@ -64,12 +62,12 @@
     &--video {
       $icon: '../images/icons/v3/video/video-slash-fill-light.svg';
       &--on {
-        @include calling-button-icon-on(
+        @include calling-button-icon-regular(
           '../images/icons/v3/video/video-fill-light.svg'
         );
       }
       &--off {
-        @include calling-button-icon-off($icon);
+        @include calling-button-icon-highlighted($icon);
       }
       &--disabled {
         @include calling-button-icon-disabled($icon);
@@ -85,12 +83,14 @@
     }
 
     &--ring {
-      $icon: '../images/icons/v3/bell/bell-ring-fill-light.svg';
+      $icon: '../images/icons/v3/bell/bell-slash-fill.svg';
       &--on {
-        @include calling-button-icon-on($icon);
+        @include calling-button-icon-regular(
+          '../images/icons/v3/bell/bell-ring-fill-light.svg'
+        );
       }
       &--off {
-        @include calling-button-icon-off($icon);
+        @include calling-button-icon-highlighted($icon);
       }
       &--disabled {
         @include calling-button-icon-disabled($icon);
@@ -100,10 +100,10 @@
     &--presenting {
       $icon: '../images/icons/v3/share_screen/share_screen-fill-light.svg';
       &--on {
-        @include calling-button-icon-on($icon);
+        @include calling-button-icon-highlighted($icon);
       }
       &--off {
-        @include calling-button-icon-off($icon);
+        @include calling-button-icon-regular($icon);
       }
       &--disabled {
         @include calling-button-icon-disabled($icon);