diff --git a/js/ui/panel.js b/js/ui/panel.js
index 339068360..073d78b16 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -388,7 +388,8 @@ class QuickSettings extends PanelMenu.Button {
         }
 
         this._system = new SystemStatus.Indicator();
-        this._volume = new VolumeStatus.Indicator();
+        this._volumeOutput = new VolumeStatus.OutputIndicator();
+        this._volumeInput = new VolumeStatus.InputIndicator();
         this._brightness = new BrightnessStatus.Indicator();
         this._remoteAccess = new RemoteAccessStatus.RemoteAccessApplet();
         this._location = new LocationStatus.Indicator();
@@ -401,10 +402,11 @@ class QuickSettings extends PanelMenu.Button {
         this._unsafeMode = new UnsafeModeIndicator();
         this._backgroundApps = new BackgroundAppsStatus.Indicator();
 
-        this._indicators.add_child(this._brightness);
         this._indicators.add_child(this._remoteAccess);
-        this._indicators.add_child(this._thunderbolt);
+        this._indicators.add_child(this._volumeInput);
         this._indicators.add_child(this._location);
+        this._indicators.add_child(this._brightness);
+        this._indicators.add_child(this._thunderbolt);
         this._indicators.add_child(this._nightLight);
         if (this._network)
             this._indicators.add_child(this._network);
@@ -414,12 +416,13 @@ class QuickSettings extends PanelMenu.Button {
             this._indicators.add_child(this._bluetooth);
         this._indicators.add_child(this._rfkill);
         this._indicators.add_child(this._autoRotate);
-        this._indicators.add_child(this._volume);
+        this._indicators.add_child(this._volumeOutput);
         this._indicators.add_child(this._unsafeMode);
         this._indicators.add_child(this._system);
 
         this._addItems(this._system.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
-        this._addItems(this._volume.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeOutput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeInput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
         this._addItems(this._brightness.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
 
         this._addItems(this._remoteAccess.quickSettingsItems);
diff --git a/js/ui/status/volume.js b/js/ui/status/volume.js
index bc591ac09..ecef81b00 100644
--- a/js/ui/status/volume.js
+++ b/js/ui/status/volume.js
@@ -1,5 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Indicator */
+/* exported OutputIndicator InputIndicator */
 
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
@@ -407,71 +407,13 @@ class InputStreamSlider extends StreamSlider {
     }
 });
 
-var Indicator = GObject.registerClass(
-class Indicator extends SystemIndicator {
-    _init() {
-        super._init();
+let VolumeIndicator = GObject.registerClass(
+class VolumeIndicator extends SystemIndicator {
+    constructor() {
+        super();
 
-        this._primaryIndicator = this._addIndicator();
-        this._inputIndicator = this._addIndicator();
-
-        this._primaryIndicator.reactive = true;
-        this._inputIndicator.reactive = true;
-
-        this._primaryIndicator.connect('scroll-event',
-            (actor, event) => this._handleScrollEvent(this._output, event));
-        this._inputIndicator.connect('scroll-event',
-            (actor, event) => this._handleScrollEvent(this._input, event));
-
-        this._control = getMixerControl();
-        this._control.connectObject(
-            'state-changed', () => this._onControlStateChanged(),
-            'default-sink-changed', () => this._readOutput(),
-            'default-source-changed', () => this._readInput(),
-            this);
-
-        this._output = new OutputStreamSlider(this._control);
-        this._output.connect('stream-updated', () => {
-            const icon = this._output.getIcon();
-
-            if (icon)
-                this._primaryIndicator.icon_name = icon;
-            this._primaryIndicator.visible = icon !== null;
-        });
-
-        this._input = new InputStreamSlider(this._control);
-        this._input.connect('stream-updated', () => {
-            const icon = this._input.getIcon();
-
-            if (icon)
-                this._inputIndicator.icon_name = icon;
-        });
-
-        this._input.bind_property('visible',
-            this._inputIndicator, 'visible',
-            GObject.BindingFlags.SYNC_CREATE);
-
-        this.quickSettingsItems.push(this._output);
-        this.quickSettingsItems.push(this._input);
-
-        this._onControlStateChanged();
-    }
-
-    _onControlStateChanged() {
-        if (this._control.get_state() === Gvc.MixerControlState.READY) {
-            this._readInput();
-            this._readOutput();
-        } else {
-            this._primaryIndicator.hide();
-        }
-    }
-
-    _readOutput() {
-        this._output.stream = this._control.get_default_sink();
-    }
-
-    _readInput() {
-        this._input.stream = this._control.get_default_source();
+        this._indicator = this._addIndicator();
+        this._indicator.reactive = true;
     }
 
     _handleScrollEvent(item, event) {
@@ -486,3 +428,86 @@ class Indicator extends SystemIndicator {
         return result;
     }
 });
+
+var OutputIndicator = GObject.registerClass(
+class OutputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.connect('scroll-event',
+            (actor, event) => this._handleScrollEvent(this._output, event));
+
+        this._control = getMixerControl();
+        this._control.connectObject(
+            'state-changed', () => this._onControlStateChanged(),
+            'default-sink-changed', () => this._readOutput(),
+            this);
+
+        this._output = new OutputStreamSlider(this._control);
+        this._output.connect('stream-updated', () => {
+            const icon = this._output.getIcon();
+
+            if (icon)
+                this._indicator.icon_name = icon;
+            this._indicator.visible = icon !== null;
+        });
+
+        this.quickSettingsItems.push(this._output);
+
+        this._onControlStateChanged();
+    }
+
+    _onControlStateChanged() {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
+            this._readOutput();
+        else
+            this._indicator.hide();
+    }
+
+    _readOutput() {
+        this._output.stream = this._control.get_default_sink();
+    }
+});
+
+var InputIndicator = GObject.registerClass(
+class InputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.add_style_class_name('privacy-indicator');
+
+        this._indicator.connect('scroll-event',
+            (actor, event) => this._handleScrollEvent(this._input, event));
+
+        this._control = getMixerControl();
+        this._control.connectObject(
+            'state-changed', () => this._onControlStateChanged(),
+            'default-source-changed', () => this._readInput(),
+            this);
+
+        this._input = new InputStreamSlider(this._control);
+        this._input.connect('stream-updated', () => {
+            const icon = this._input.getIcon();
+
+            if (icon)
+                this._indicator.icon_name = icon;
+        });
+
+        this._input.bind_property('visible',
+            this._indicator, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+
+        this.quickSettingsItems.push(this._input);
+
+        this._onControlStateChanged();
+    }
+
+    _onControlStateChanged() {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
+            this._readInput();
+    }
+
+    _readInput() {
+        this._input.stream = this._control.get_default_source();
+    }
+});