diff --git a/web/components/video/VideoJS/VideoJS.scss b/web/components/video/VideoJS/VideoJS.scss
index 5ee84db7ed..874c6c2e63 100644
--- a/web/components/video/VideoJS/VideoJS.scss
+++ b/web/components/video/VideoJS/VideoJS.scss
@@ -1,51 +1,64 @@
 /* Change all text and icon colors in the player. */
-.vjs-owncast.video-js {
-  color: var(--theme-color-components-text-on-light);
+.vjs-owncast {
+
+	.video-js {
+		color: var(--theme-color-components-text-on-light);
+	}
+
+	.vjs-big-play-button {
+		z-index: 10;
+		color: var(--theme-color-action);
+		font-size: 8rem !important;
+		border-color: transparent !important;
+		border-radius: var(--theme-rounded-corners) !important;
+		background-color: transparent !important;
+		text-shadow: 2px 3px 4px #0000005f;
+
+		-webkit-text-stroke: 2px white;
+		text-stroke: 2px white;
+
+		:hover {
+			transition: all 0.2s ease-in-out;
+			font-size: 10rem;
+			text-shadow: 2px 5px 4px #00000093;
+		}
+	}
+
+	.vjs-loading-spinner {
+		z-index: 10;
+		display: block;
+		color: var(--theme-color-components-text-on-light);
+	}
+
+	.vjs-control-bar {
+		color: var(--theme-color-components-text-on-light);
+		background-color: var(--theme-color-background-main) !important;
+	}
+
+	.vjs-control {
+		color: var(--theme-color-components-text-on-light);
+	}
+
 }
 
-.vjs-owncast .vjs-big-play-button {
-  z-index: 10;
-  color: var(--theme-color-action);
-  font-size: 8rem !important;
-  border-color: transparent !important;
-  border-radius: var(--theme-rounded-corners) !important;
-  background-color: transparent !important;
-  text-shadow: 2px 3px 4px #0000005f;
-
-  -webkit-text-stroke: 2px white;
-  text-stroke: 2px white;
-
-  :hover {
-    transition: all 0.2s ease-in-out;
-    font-size: 10rem;
-    text-shadow: 2px 5px 4px #00000093;
-  }
+.vjs-airplay {
+	.vjs-icon-placeholder::before {
+		content: url('../airplay.svg');
+		width: 50% !important;
+		height: 50% !important;
+		top: 15% !important;
+		left: 15% !important;
+	}
 }
 
-.vjs-owncast .vjs-loading-spinner {
-  z-index: 10;
-  display: block;
-  color: var(--theme-color-components-text-on-light);
-}
+.vjs-quality-selector {
+	.vjs-icon-placeholder {
+		font-family: VideoJS, serif;
+		font-weight: 400;
+		font-style: normal;
+	}
 
-.vjs-owncast .vjs-control-bar {
-  color: var(--theme-color-components-text-on-light);
-  background-color: var(--theme-color-background-main) !important;
-}
-
-.vjs-owncast .vjs-control {
-  color: var(--theme-color-components-text-on-light);
-}
-
-.vjs-airplay .vjs-icon-placeholder::before {
-  content: url('../airplay.png');
-}
-
-.vjs-quality-selector .vjs-icon-placeholder {
-  font-family: VideoJS;
-  font-weight: 400;
-  font-style: normal;
-}
-.vjs-quality-selector .vjs-icon-placeholder::before {
-  content: '\f110';
+	.vjs-icon-placeholder::before {
+		content: '\f110';
+	}
 }
diff --git a/web/components/video/airplay.png b/web/components/video/airplay.png
deleted file mode 100644
index 6529f6902d..0000000000
Binary files a/web/components/video/airplay.png and /dev/null differ
diff --git a/web/components/video/airplay.svg b/web/components/video/airplay.svg
new file mode 100644
index 0000000000..dab0aeb3f4
--- /dev/null
+++ b/web/components/video/airplay.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 46 42" style="enable-background:new 0 0 46 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+</style>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M22.2,24.2L8.5,39.9c-0.5,0.6-0.1,1.5,0.7,1.5h27.5c0.8,0,1.2-0.9,0.7-1.5L23.8,24.2
+			c-0.2-0.2-0.5-0.4-0.8-0.4C22.7,23.8,22.4,23.9,22.2,24.2 M6.5,0.6c-2.3,0-3.1,0.2-3.9,0.7C1.8,1.7,1.1,2.4,0.7,3.2
+			C0.2,4,0,4.9,0,7.1v17.5c0,2.3,0.2,3.1,0.7,3.9c0.4,0.8,1.1,1.5,1.9,1.9c0.8,0.4,1.7,0.7,3.9,0.7h5.2l2.2-2.6H5.8
+			c-1.1,0-1.6-0.1-2-0.3c-0.4-0.2-0.7-0.5-1-1c-0.2-0.4-0.3-0.8-0.3-2v-19c0-1.1,0.1-1.6,0.3-2c0.2-0.4,0.5-0.7,1-1
+			c0.4-0.2,0.8-0.3,2-0.3h34.3c1.1,0,1.6,0.1,2,0.3c0.4,0.2,0.7,0.5,1,1c0.2,0.4,0.3,0.8,0.3,2v19c0,1.1-0.1,1.6-0.3,2
+			c-0.2,0.4-0.5,0.7-1,1c-0.4,0.2-0.8,0.3-2,0.3H32l2.2,2.6h5.2c2.3,0,3.1-0.2,3.9-0.7c0.8-0.4,1.5-1.1,1.9-1.9
+			c0.4-0.8,0.7-1.7,0.7-3.9V7.1c0-2.3-0.2-3.1-0.7-3.9c-0.4-0.8-1.1-1.5-1.9-1.9c-0.8-0.4-1.7-0.7-3.9-0.7H6.5z"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<rect x="-6.4" y="-5.8" class="st0" width="58.7" height="53.6"/>
+</g>
+</svg>