diff --git a/controls.md b/controls.md
index 8c9a27f9..b3c29962 100644
--- a/controls.md
+++ b/controls.md
@@ -33,23 +33,23 @@ var controls = [
 	'</div>',
 	'<span class="player-controls-playback">',
 		'<button type="button" data-player="restart">',
-			'<span class="icon-restart" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-refresh"></use></svg>',
 			'<span class="sr-only">Restart</span>',
 		'</button>',
 		'<button type="button" data-player="rewind">',
-			'<span class="icon-rewind" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-rewind"></use></svg>',
 			'<span class="sr-only">Rewind <span class="player-seek-time">{seek_time}</span> seconds</span>',
 		'</button>',
 		'<button type="button" aria-label="{aria-label}" data-player="play">',
-			'<span class="icon-play" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-play"></use></svg>',
 			'<span class="sr-only">Play</span>',
 		'</button>',
 		'<button type="button" data-player="pause">',
-			'<span class="icon-pause" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-pause"></use></svg>',
 			'<span class="sr-only">Pause</span>',
 		'</button>',
 		'<button type="button" data-player="fast-forward">',
-			'<span class="icon-forward" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-fast-forward"></use></svg>',
 			'<span class="sr-only">Fast forward <span class="player-seek-time">{seek_time}</span> seconds</span>',
 		'</button>',
 		'<span class="player-time">',
@@ -60,20 +60,20 @@ var controls = [
 	'<span class="player-controls-sound">',
 		'<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">',
 		'<label id="mute{id}" for="mute{id}">',
-			'<span class="icon-mute icon-muted" aria-hidden="true"></span>',
-			'<span class="icon-volume-up" aria-hidden="true"></span>',
+			'<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>',
+			'<svg><use xlink:href="#icon-sound"></use></svg>',
 			'<span class="sr-only">Mute</span>',
 		'</label>',
 		'<label for="volume{id}" class="sr-only">Volume:</label>',
 		'<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">',
 		'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">',
 		'<label for="captions{id}">',
-			'<span class="icon-subtitles" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-bubble"></use></svg>',
 			'<span class="sr-only">Captions</span>',
 		'</label>',
 		'<button type="button" data-player="fullscreen">',
-			'<span class="icon-resize-small icon-exit-fullscreen" aria-hidden="true"></span>',
-			'<span class="icon-resize-full" aria-hidden="true"></span>',
+			'<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>',
+			'<svg><use xlink:href="#icon-expand"></use></svg>',
 			'<span class="sr-only">Toggle fullscreen</span>',
 		'</button>',
 	'</span>',