diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
index ad5aae62f78b03ac54f56a26c4dbe8161ff816b3..a61929355c7cdc4bb8e55b4fe68bfc512c529ac6 100644
--- a/src/components/2d-mute-state-indicator.css
+++ b/src/components/2d-mute-state-indicator.css
@@ -1,17 +1,12 @@
 :local(.indicator) {
-    display:flex;
-    /* position: absolute; */
-    /* top: 10px; */
-    /* left: calc(50vw - 16px); */
-    /* width: 32px; */
-    /* height: 32px; */
     width: 48px;
     height: 48px;
-    background-size: 100%;
-    background-image: url(../assets/hud/unmuted.png);
-    background-repeat: no-repeat;
+    mask: url(../assets/hud/unmuted.png);
+    mask-size: 48px;
+    background-color: white;
 }
 
 :local(.indicator.muted) {
-    background-image: url(../assets/hud/muted.png);
+    mask: url(../assets/hud/muted.png);
+    mask-size: 48px;
 }
diff --git a/src/components/2d-mute-state-indicator.js b/src/components/2d-mute-state-indicator.js
index f4997c06635d27e873e561fe9a391c70e0648b1c..81cbb4011c982b1417fd6d2c3533dcdf8a6b7ed8 100644
--- a/src/components/2d-mute-state-indicator.js
+++ b/src/components/2d-mute-state-indicator.js
@@ -21,6 +21,11 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
     this.onMouseOut = () => this.muteIcon.classList.toggle(styles.muted, this.el.sceneEl.is("muted"));
 
     this.onClick = () => this.el.emit("action_mute");
+
+    this.onMicAudio = e => {
+      const red = 1.0 - e.detail.volume / 10.0;
+      this.muteIcon.style["background-color"] = `rgb(${red * 255},255,255)`;
+    };
   },
 
   play() {
@@ -30,6 +35,8 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
     this.muteIcon.addEventListener("mouseover", this.onMouseOver);
     this.muteIcon.addEventListener("mouseout", this.onMouseOut);
     this.muteIcon.addEventListener("click", this.onClick);
+
+    this.el.sceneEl.addEventListener("micAudio", this.onMicAudio);
   },
 
   pause() {
@@ -39,6 +46,8 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
     this.muteIcon.removeEventListener("mouseover", this.onMouseOver);
     this.muteIcon.removeEventListener("mouseout", this.onMouseOut);
     this.muteIcon.removeEventListener("click", this.onClick);
+
+    this.el.sceneEl.removeEventListener("micAudio", this.onMicAudio);
   },
 
   onStateToggled(e) {