Using inline SVG for greater flexibility with colourising

src/scss/components/_header.scss

@@ -9,13 +9,15 @@ main {
 			display: inline-block;
 		}
 
-		.icon {
-			@include invert();
+		.header-icon {
 			display: inline-block;
 			padding-right: 14px;
-			height: 2.6rem;
 			vertical-align: bottom;
 			margin-bottom: 8px;
+
+			svg {
+				height: 2.6rem;
+			}
 		}
 
 		.options {

src/scss/components/_icon.scss

@@ -1,8 +1,11 @@
 
 .icon {
-	&.white{
-		-webkit-filter: invert(1);
-		-moz-filter: invert(1);
-		filter: invert(1);
+	margin-top: -0.2em;
+	vertical-align: middle;
+
+	svg {
+		height: 1.4em;
+		fill: $white;
+		vertical-align: middle;
 	}
 }

src/scss/components/_playback-controls.scss

@@ -92,22 +92,25 @@
 		opacity: 0.8;
 
 		.icon {
-			width: 12px;
-			height: 12px;
-			@include invert();
+			svg {
+				height: 12px;
+			}
 		}
 
 		&.play {
 			margin-bottom: -6px;
 
 			.icon {
-				width: 24px;
-				height: 24px;
+				svg {
+					height: 24px;
+				}
 			}
 		}
 
 		&.active {
-			color: $turquoise !important;
+			svg {
+				fill: $turquoise !important;
+			}
 		}
 
 		&:hover {

src/scss/components/_sidebar.scss

@@ -57,11 +57,13 @@ aside{
 			line-height: 18px;
 
 			.icon {
-				@include invert();
-				height: 14px;
 				padding-right: 12px;
 				vertical-align: top;
 				margin-top: 0;
+
+				svg {
+					height: 14px;
+				}
 			}
 
 			&.active {