deleted file mode 100644
--- a/browser/themes/linux/webRTC-indicator.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-window {
-  border: 1px solid #ff9500;
-}
-
-#audioVideoButton,
-#screenShareButton,
-#firefoxButton {
-  height: 29px;
-  margin: 0;
-  -moz-appearance: none;
-  border-style: none;
-}
-
-#firefoxButton {
-  background-image: url("chrome://branding/content/icon48.png");
-  background-repeat: no-repeat;
-  background-size: 22px;
-  background-position: center center;
-  min-width: 29px;
-  background-color: white;
-}
-
-#firefoxButton:hover {
-  background-color: #f2f2f2;
-}
-
-#screenShareButton {
-  background-image: url("webRTC-screen-white-16.png");
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 16px;
-  min-width: 27px;
-  display: none;
-}
-
-window[sharingscreen] > #screenShareButton {
-  display: -moz-box;
-}
-
-#audioVideoButton {
-  display: none;
-  background-repeat: no-repeat;
-}
-
-/* When screen sharing, need to pull in the separator: */
-window[sharingscreen] > #audioVideoButton {
-  margin-right: -1px;
-}
-
-/* Single icon button: */
-window[sharingvideo] > #audioVideoButton,
-window[sharingaudio] > #audioVideoButton {
-  display: -moz-box;
-  background-position: center center;
-  background-size: 16px;
-  min-width: 26px;
-}
-
-window[sharingvideo] > #audioVideoButton {
-  background-image: url("webRTC-camera-white-16.png");
-}
-
-window[sharingaudio] > #audioVideoButton {
-  background-image: url("webRTC-microphone-white-16.png");
-}
-
-/* Multi-icon button: */
-window[sharingaudio][sharingvideo] > #audioVideoButton {
-  background-image: url("webRTC-camera-white-16.png"),
-                    url("webRTC-microphone-white-16.png");
-  background-position: 6px center, 26px center;
-  background-size: 16px, 16px;
-  min-width: 46px;
-}
-
-/* Hover styles */
-#audioVideoButton,
-#screenShareButton {
-  background-color: #ffaa33;
-}
-
-#audioVideoButton:hover,
-#screenShareButton:hover {
-  background-color: #ff9500;
-}
-
-/* Don't show the dropmarker for the type="menu" case */
-#audioVideoButton > .box-inherit > .button-menu-dropmarker,
-#screenShareButton > .box-inherit > .button-menu-dropmarker {
-  display: none;
-}
-
-/* Separator in case of screen sharing + video/audio sharing */
-#shareSeparator {
-  width: 1px;
-  margin: 4px -1px 4px 0;
-  background-color: #FFCA80;
-  /* Separator needs to show above either button when they're hovered: */
-  position: relative;
-  z-index: 1;
-  display: none;
-}
-
-window[sharingscreen][sharingvideo] > #shareSeparator,
-window[sharingscreen][sharingaudio] > #shareSeparator {
-  display: -moz-box;
-}
-
-:-moz-any(#audioVideoButton, #screenShareButton,
-          #firefoxButton):-moz-focusring > .button-box {
-  border: none;
-}

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/webRTC-indicator.css
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+window {
+  border: 1px solid #ff9500;
+}
+
+#audioVideoButton,
+#screenShareButton,
+#firefoxButton {
+  height: 29px;
+  margin: 0;
+  -moz-appearance: none;
+  border-style: none;
+}
+
+#firefoxButton {
+  background-image: url("chrome://branding/content/icon48.png");
+  background-repeat: no-repeat;
+  background-size: 22px;
+  background-position: center center;
+  min-width: 29px;
+  background-color: white;
+}
+
+#firefoxButton:hover {
+  background-color: #f2f2f2;
+}
+
+#screenShareButton {
+  background-image: url("webRTC-screen-16.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  min-width: 27px;
+  display: none;
+}
+
+window[sharingscreen] > #screenShareButton {
+  display: -moz-box;
+}
+
+#audioVideoButton {
+  display: none;
+  background-repeat: no-repeat;
+}
+
+/* When screen sharing, need to pull in the separator: */
+window[sharingscreen] > #audioVideoButton {
+  margin-right: -1px;
+}
+
+/* Single icon button: */
+window[sharingvideo] > #audioVideoButton,
+window[sharingaudio] > #audioVideoButton {
+  display: -moz-box;
+  background-position: center center;
+  background-size: 16px;
+  min-width: 26px;
+}
+
+window[sharingvideo] > #audioVideoButton {
+  background-image: url("webRTC-camera-16.svg");
+}
+
+window[sharingaudio] > #audioVideoButton {
+  background-image: url("webRTC-microphone-16.svg");
+}
+
+/* Multi-icon button: */
+window[sharingaudio][sharingvideo] > #audioVideoButton {
+  background-image: url("webRTC-camera-16.svg"),
+                    url("webRTC-microphone-16.svg");
+  background-position: 6px center, 26px center;
+  background-size: 16px, 16px;
+  min-width: 46px;
+}
+
+/* Hover styles */
+#audioVideoButton,
+#screenShareButton {
+  background-color: #ffaa33;
+}
+
+#audioVideoButton:hover,
+#screenShareButton:hover {
+  background-color: #ff9500;
+}
+
+/* Don't show the dropmarker for the type="menu" case */
+#audioVideoButton > .box-inherit > .button-menu-dropmarker,
+#screenShareButton > .box-inherit > .button-menu-dropmarker {
+  display: none;
+}
+
+/* Separator in case of screen sharing + video/audio sharing */
+#shareSeparator {
+  width: 1px;
+  margin: 4px -1px 4px 0;
+  background-color: #FFCA80;
+  /* Separator needs to show above either button when they're hovered: */
+  position: relative;
+  z-index: 1;
+  display: none;
+}
+
+window[sharingscreen][sharingvideo] > #shareSeparator,
+window[sharingscreen][sharingaudio] > #shareSeparator {
+  display: -moz-box;
+}
+
+:-moz-any(#audioVideoButton, #screenShareButton,
+          #firefoxButton):-moz-focusring > .button-box {
+  border: none;
+}

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/webrtc/camera-16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 80 l0 -80 80 0 80 0 0 80 0 80 -80 0 -80 0 0 -80z m110 38 c0 -9
+3 -9 12 0 22 22 28 13 28 -38 0 -51 -6 -60 -28 -38 -9 9 -12 9 -12 0 0 -8 -18
+-12 -50 -12 l-50 0 0 50 0 50 50 0 c32 0 50 -4 50 -12z"/>
+</g>
+</svg>

deleted file mode 100644
index e1e360bd8f90c231e20c76eec76e55180cf11002..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index ddbbf50836def0eea44beb0cab980df9b1b0a81d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/webrtc/microphone-16.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 80 l0 -80 80 0 80 0 0 80 0 80 -80 0 -80 0 0 -80z m100 28 c0 -32
+3 -39 10 -28 8 12 10 9 10 -13 0 -16 -7 -30 -16 -34 -13 -5 -13 -7 -2 -14 8
+-6 1 -9 -22 -9 -23 0 -30 3 -22 9 11 7 11 9 -2 14 -9 4 -16 18 -16 34 0 22 2
+25 10 13 7 -11 10 -4 10 28 0 35 3 42 20 42 17 0 20 -7 20 -42z"/>
+</g>
+</svg>

deleted file mode 100644
index 0091529ba6f192b0b0a320701d1e2901bafa2291..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 5bf1f5c62a2cd074341695c56cd238b6fe886112..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/webrtc/screen-16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 80 l0 -80 80 0 80 0 0 80 0 80 -80 0 -80 0 0 -80z m110 51 c0 -6
+-17 -11 -38 -13 -32 -3 -37 -7 -40 -30 -5 -43 -22 -33 -22 12 l0 40 50 0 c28
+0 50 -4 50 -9z m30 -61 l0 -40 -50 0 -50 0 0 40 0 40 50 0 50 0 0 -40z"/>
+</g>
+</svg>

deleted file mode 100644
index 045bfd35a74f585f6042f6bd9a3dfd99a7cf7100..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 1e5fca5d6722805797cda85d46711a4a34fd6b73..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
--- a/browser/themes/windows/webRTC-indicator.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-window {
-  border: 1px solid #ff9500;
-}
-
-#audioVideoButton,
-#screenShareButton,
-#firefoxButton {
-  height: 29px;
-  margin: 0;
-  -moz-appearance: none;
-  border-style: none;
-}
-
-#firefoxButton {
-  background-image: url("chrome://branding/content/icon48.png");
-  background-repeat: no-repeat;
-  background-size: 22px;
-  background-position: center center;
-  min-width: 29px;
-  background-color: white;
-}
-
-#firefoxButton:hover {
-  background-color: #f2f2f2;
-}
-
-#screenShareButton {
-  background-image: url("webRTC-screen-white-16.png");
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 16px;
-  min-width: 27px;
-  display: none;
-}
-
-window[sharingscreen] > #screenShareButton {
-  display: -moz-box;
-}
-
-#audioVideoButton {
-  display: none;
-  background-repeat: no-repeat;
-}
-
-/* When screen sharing, need to pull in the separator: */
-window[sharingscreen] > #audioVideoButton {
-  margin-right: -1px;
-}
-
-/* Single icon button: */
-window[sharingvideo] > #audioVideoButton,
-window[sharingaudio] > #audioVideoButton {
-  display: -moz-box;
-  background-position: center center;
-  background-size: 16px;
-  min-width: 26px;
-}
-
-window[sharingvideo] > #audioVideoButton {
-  background-image: url("webRTC-camera-white-16.png");
-}
-
-window[sharingaudio] > #audioVideoButton {
-  background-image: url("webRTC-microphone-white-16.png");
-}
-
-/* Multi-icon button: */
-window[sharingaudio][sharingvideo] > #audioVideoButton {
-  background-image: url("webRTC-camera-white-16.png"),
-                    url("webRTC-microphone-white-16.png");
-  background-position: 6px center, 26px center;
-  background-size: 16px, 16px;
-  min-width: 46px;
-}
-
-/* Hover styles */
-#audioVideoButton,
-#screenShareButton {
-  background-color: #ffaa33;
-}
-
-#audioVideoButton:hover,
-#screenShareButton:hover {
-  background-color: #ff9500;
-}
-
-/* Don't show the dropmarker for the type="menu" case */
-#audioVideoButton > .box-inherit > .button-menu-dropmarker,
-#screenShareButton > .box-inherit > .button-menu-dropmarker {
-  display: none;
-}
-
-/* Separator in case of screen sharing + video/audio sharing */
-#shareSeparator {
-  width: 1px;
-  margin: 4px -1px 4px 0;
-  background-color: #FFCA80;
-  /* Separator needs to show above either button when they're hovered: */
-  position: relative;
-  z-index: 1;
-  display: none;
-}
-
-window[sharingscreen][sharingvideo] > #shareSeparator,
-window[sharingscreen][sharingaudio] > #shareSeparator {
-  display: -moz-box;
-}
-
-:-moz-any(#audioVideoButton, #screenShareButton,
-          #firefoxButton):-moz-focusring > .button-box {
-  border: none;
-}