diff --git a/Assets/Cider Icons/svg/cider-backward.svg b/Assets/Cider Icons/svg/cider-backward.svg
new file mode 100644
index 00000000..e5801e05
--- /dev/null
+++ b/Assets/Cider Icons/svg/cider-backward.svg	
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 201 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1,0,0,1,971.69,-237.578)">
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/Assets/Cider Icons/svg/cider-forward.svg b/Assets/Cider Icons/svg/cider-forward.svg
new file mode 100644
index 00000000..41154a4c
--- /dev/null
+++ b/Assets/Cider Icons/svg/cider-forward.svg	
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 201 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-771.681,-237.578)">
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/Assets/Cider Icons/svg/cider-pause.svg b/Assets/Cider Icons/svg/cider-pause.svg
new file mode 100644
index 00000000..bcc4cf53
--- /dev/null
+++ b/Assets/Cider Icons/svg/cider-pause.svg	
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 104 139" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-339.137,-234.806)">
+        <path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
+        <g transform="matrix(1,0,0,1,61.8631,0)">
+            <path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/Assets/Cider Icons/svg/cider-play.svg b/Assets/Cider Icons/svg/cider-play.svg
new file mode 100644
index 00000000..4246456a
--- /dev/null
+++ b/Assets/Cider Icons/svg/cider-play.svg	
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 113 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(7.90918e-17,1.29167,-1.1205,6.86106e-17,456.042,-747.431)">
+        <path d="M621.069,310.862C622.291,308.417 624.553,306.911 627,306.911C629.447,306.911 631.709,308.417 632.931,310.862C643.071,331.141 663.672,372.343 674.309,393.619C675.69,396.38 675.688,399.781 674.305,402.541C672.922,405.3 670.367,407 667.602,407C646.846,407 607.154,407 586.398,407C583.633,407 581.078,405.3 579.695,402.541C578.312,399.781 578.31,396.38 579.691,393.619C590.328,372.343 610.929,331.141 621.069,310.862Z" style="fill:white;"/>
+    </g>
+</svg>
diff --git a/src/renderer/assets/cider-icons/backward.svg b/src/renderer/assets/cider-icons/backward.svg
new file mode 100644
index 00000000..87d5ecca
--- /dev/null
+++ b/src/renderer/assets/cider-icons/backward.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-0.13004,0,0,0.13004,130.354,-21.1046)">
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/assets/cider-icons/forward.svg b/src/renderer/assets/cider-icons/forward.svg
new file mode 100644
index 00000000..37320d60
--- /dev/null
+++ b/src/renderer/assets/cider-icons/forward.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.13004,0,0,0.13004,-96.3538,-21.1046)">
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
+            <path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/assets/cider-icons/pause.svg b/src/renderer/assets/cider-icons/pause.svg
new file mode 100644
index 00000000..39b3608c
--- /dev/null
+++ b/src/renderer/assets/cider-icons/pause.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.136376,0,0,0.136376,-36.3229,-24.4659)">
+        <path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
+        <g transform="matrix(1,0,0,1,61.8631,0)">
+            <path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/assets/cider-icons/play.svg b/src/renderer/assets/cider-icons/play.svg
new file mode 100644
index 00000000..885b90cc
--- /dev/null
+++ b/src/renderer/assets/cider-icons/play.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.19618e-17,0.195351,-0.169464,1.03767e-17,78.491,-105.485)">
+        <path d="M621.069,310.862C622.291,308.417 624.553,306.911 627,306.911C629.447,306.911 631.709,308.417 632.931,310.862C643.071,331.141 663.672,372.343 674.309,393.619C675.69,396.38 675.688,399.781 674.305,402.541C672.922,405.3 670.367,407 667.602,407C646.846,407 607.154,407 586.398,407C583.633,407 581.078,405.3 579.695,402.541C578.312,399.781 578.31,396.38 579.691,393.619C590.328,372.343 610.929,331.141 621.069,310.862Z" style="fill:white;"/>
+    </g>
+</svg>
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 11412567..10939150 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1579,19 +1579,27 @@ input[type=checkbox][switch]:checked:active::before {
 }
 
 .playback-button.pause {
-  background-image: url('./assets/pause.svg');
+  background-image: url('./assets/cider-icons/pause.svg');
+  background-size: 38px;
+  background-position: center;
 }
 
 .playback-button.play {
-  background-image: url('./assets/play.svg');
+  background-image: url('./assets/cider-icons/play.svg');
+  background-size: 38px;
+  background-position: center;
 }
 
 .playback-button.next {
-  background-image: url('./assets/forward.svg');
+  background-image: url('./assets/cider-icons/forward.svg');
+  background-size: 60%;
+  background-position: center;
 }
 
 .playback-button.previous {
-  background-image: url('./assets/backward.svg');
+  background-image: url('./assets/cider-icons/backward.svg');
+  background-size: 60%;
+  background-position: center;
 }
 
 .playback-button {