diff --git a/src/renderer/index.js b/src/renderer/index.js
index ddfc7b2b..66cd90c9 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -68,6 +68,10 @@ Vue.component("sidebar-library-item", {
       required: false,
       default: "",
     },
+    svgIconName: {
+        type: String,
+        required: false
+    },
     cdClick: {
       type: Function,
       required: false,
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 03c14b97..bb7a1f48 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -198,13 +198,13 @@
     </div>
     <div class="app-chrome-item" v-else>
       <div class="top-nav-group">
-        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
+        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
         </sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
+        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
           page="listen_now"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
+        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
         </sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
+        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
         </sidebar-library-item>
       </div>
     </div>
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 3e43cf80..7b14d181 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -51,6 +51,7 @@
           <sidebar-library-item
             :name="$root.getLz('home.title')"
             svg-icon="./assets/feather/home.svg"
+            svg-icon-name="home"
             page="home"
           >
           </sidebar-library-item>
@@ -67,17 +68,20 @@
           <sidebar-library-item
             :name="$root.getLz('term.listenNow')"
             svg-icon="./assets/feather/play-circle.svg"
+            svg-icon-name="listenNow"
             page="listen_now"
           ></sidebar-library-item>
           <sidebar-library-item
             :name="$root.getLz('term.browse')"
             svg-icon="./assets/feather/globe.svg"
+            svg-icon-name="browse"
             page="browse"
           >
           </sidebar-library-item>
           <sidebar-library-item
             :name="$root.getLz('term.radio')"
             svg-icon="./assets/feather/radio.svg"
+            svg-icon-name="radio"
             page="radio"
           ></sidebar-library-item>
         </template>
@@ -94,36 +98,42 @@
         <sidebar-library-item
           :name="$root.getLz('term.recentlyAdded')"
           svg-icon="./assets/feather/plus-circle.svg"
+          svg-icon-name="recentlyAdded"
           v-if="cfg.general.sidebarItems.recentlyAdded"
           page="library-recentlyadded"
         ></sidebar-library-item>
         <sidebar-library-item
           :name="$root.getLz('term.songs')"
           svg-icon="./assets/feather/music.svg"
+          svg-icon-name="songs"
           v-if="cfg.general.sidebarItems.songs"
           page="library-songs"
         ></sidebar-library-item>
         <sidebar-library-item
           :name="$root.getLz('term.albums')"
           svg-icon="./assets/feather/disc.svg"
+          svg-icon-name="albums"
           v-if="cfg.general.sidebarItems.albums"
           page="library-albums"
         ></sidebar-library-item>
         <sidebar-library-item
           :name="$root.getLz('term.artists')"
           svg-icon="./assets/feather/user.svg"
+          svg-icon-name="artists"
           v-if="cfg.general.sidebarItems.artists"
           page="library-artists"
         ></sidebar-library-item>
         <sidebar-library-item
           :name="$root.getLz('term.videos')"
           svg-icon="./assets/feather/video.svg"
+          svg-icon-name="videos"
           v-if="cfg.general.sidebarItems.videos"
           page="library-videos"
         ></sidebar-library-item>
         <sidebar-library-item
           :name="$root.getLz('term.podcasts')"
           svg-icon="./assets/feather/mic.svg"
+          svg-icon-name="podcasts"
           v-if="cfg.general.sidebarItems.podcasts"
           page="podcasts"
         >
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 6d276618..8a252226 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='clickEvent()'>
             <template v-if="!renaming">
-                <svg-icon :url="icon"/> {{ item.attributes.name }}
+                <svg-icon :url="icon" name="sidebar-playlist"/> {{ item.attributes.name }}
                 <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 32bee000..34c5c9dd 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -123,7 +123,7 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
+        <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
         <span class="sidebar-item-text">{{ name }}</span>
     </button>
 </script>