diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index c96b171c..7cd68bd3 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -509,10 +509,16 @@
 
 ._svg-icon {
   --icon: url("./assets/chevron-left.svg");
-  width: 1em;
-  height: 1em;
+  --size: 1em;
+  width: var(--size);
+  height: var(--size);
   -webkit-mask-image: var(--icon);
   -webkit-mask-position: center;
-  background: white;
+  -webkit-mask-size: contain;
+  background: rgb(255 255 255 / 76%);
   -webkit-mask-repeat: no-repeat;
+
+  &.md {
+    --size: 1.2em;
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/main/components/svg-icon.js b/src/renderer/main/components/svg-icon.js
index 974a1e78..0ad99d2a 100644
--- a/src/renderer/main/components/svg-icon.js
+++ b/src/renderer/main/components/svg-icon.js
@@ -1,12 +1,16 @@
 export const svgIcon = Vue.component("svg-icon", {
     template: `
-        <div class="_svg-icon" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
+        <div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
     `,
     props: {
         name: {
             type: String,
             required: false
         },
+        classes: {
+            type: String,
+            required: false
+        },
         url: {
             type: String,
             required: true,
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 9a161c19..33819544 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -6,7 +6,7 @@
         <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/settings.svg" name="settings-general" /></div>
+                    <div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
                     <div>
                         {{ $root.getLz('settings.header.general') }}
                     </div>
@@ -234,7 +234,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/feather/headphones.svg" name="settings-audio" /></div>
+                    <div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
                     <div>
                         {{ $root.getLz('settings.header.audio') }}
                     </div>
@@ -372,7 +372,7 @@
             </b-tab>
             <b-tab v-if="app.cfg.advanced.AudioContext">
                 <template #title>
-                    <div><svg-icon url="./assets/feather/zap.svg" name="settings-audiolabs" /></div>
+                    <div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
                     <div>
                         {{ $root.getLz('settings.option.audio.audioLab') }}
                     </div>
@@ -383,7 +383,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/feather/pen-tool.svg" name="settings-visual" /></div>
+                    <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
                     <div>
                         {{ $root.getLz('settings.header.visual') }}
                     </div>
@@ -624,7 +624,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/feather/mic.svg" name="settings-lyrics" /></div>
+                    <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
                     <div>
                         {{ $root.getLz('settings.header.lyrics') }}
                     </div>
@@ -963,7 +963,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/feather/radio.svg" name="settings-connectivity" /></div>
+                    <div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
                     <div>
                         {{ $root.getLz('settings.header.connectivity') }}
                     </div>
@@ -1143,7 +1143,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div><svg-icon url="./assets/feather/hard-drive.svg" name="settings-advanced" /></div>
+                    <div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
                     <div>
                         {{$root.getLz('settings.header.advanced')}}
                     </div>