diff --git a/src/renderer/assets/feather/x-circle-white.svg b/src/renderer/assets/feather/x-circle-white.svg
new file mode 100644
index 00000000..4ad16a6a
--- /dev/null
+++ b/src/renderer/assets/feather/x-circle-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/playPng.png b/src/renderer/assets/playPng.png
deleted file mode 100644
index 8ece27c0..00000000
Binary files a/src/renderer/assets/playPng.png and /dev/null differ
diff --git a/src/renderer/assets/shufflePng.png b/src/renderer/assets/shufflePng.png
deleted file mode 100644
index 982547d6..00000000
Binary files a/src/renderer/assets/shufflePng.png and /dev/null differ
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 8b9ad700..ace3ef06 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2095,7 +2095,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-ico-play {
-  content:url("./assets/playPng.png");
+  content:url("./assets/play.svg");
   width: 10px;
   height: 12px; 
   margin-right: 1px;
@@ -2103,15 +2103,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-ico-shuffle {
-  content:url("./assets/shufflePng.png");
-  width: 15px;
-  height: 13px; 
+  content:url("./assets/shuffle.svg");
+  width: 17px;
+  height: 17px; 
   margin-right: 1px;
+  margin-bottom: -2px;
   align-self: center;
 }
 
 .md-ico-remove {
-  content:url("./assets/feather/x-circlePng.png");
+  content:url("./assets/feather/x-circle-white.svg");
   width: 16px;
   height: 16px; 
   margin-right: 1px;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index e1fb6675..8e771cad 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -75,7 +75,7 @@
                                     {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                                 </button>
                                 <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
-                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
+                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                     Confirm?
                                 </button>
                                 <button class="more-btn-round" style="float:right;" @click="menu">
@@ -111,7 +111,7 @@
                                 {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                             </button>
                             <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
-                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
+                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                 Confirm?
                             </button>
                         </div>