diff --git a/web/multinode/src/app/components/navigation/NavigationArea.vue b/web/multinode/src/app/components/navigation/NavigationArea.vue
index 351fb9e95..e7ccc3957 100644
--- a/web/multinode/src/app/components/navigation/NavigationArea.vue
+++ b/web/multinode/src/app/components/navigation/NavigationArea.vue
@@ -89,7 +89,7 @@ export default class NavigationArea extends Vue {
             margin-bottom: 20px;
             text-decoration: none;
 
-            path {
+            ::v-deep path {
                 fill: var(--c-label);
             }
 
@@ -117,7 +117,7 @@ export default class NavigationArea extends Vue {
                     color: var(--c-title);
                 }
 
-                path {
+                ::v-deep path {
                     fill: var(--c-title) !important;
                     opacity: 1;
                 }
diff --git a/web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue b/web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue
index 677441cdf..5d87f9b64 100644
--- a/web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue
+++ b/web/multinode/src/app/components/payouts/PayoutPeriodCalendar.vue
@@ -332,10 +332,7 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
         }
     }
 
-    .arrow-icon {
-
-        path {
-            fill: var(--c-gray);
-        }
+    .arrow-icon ::v-deep path {
+        fill: var(--c-gray);
     }
 </style>
diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 382b128fd..79ae2891a 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -908,7 +908,7 @@ tbody {
     transform: translateY(-50%);
     margin: unset;
 
-    & path {
+    ::v-deep path {
         fill: white;
     }
 }
diff --git a/web/satellite/src/components/common/VLoader.vue b/web/satellite/src/components/common/VLoader.vue
index d9c066330..791e8d0c8 100644
--- a/web/satellite/src/components/common/VLoader.vue
+++ b/web/satellite/src/components/common/VLoader.vue
@@ -42,10 +42,7 @@ export default class VLoader extends Vue {
         justify-content: center;
     }
 
-    .white {
-
-        path {
-            fill: #fff;
-        }
+    .white ::v-deep path {
+        fill: #fff;
     }
 </style>
diff --git a/web/satellite/src/components/navigation/AccountArea.vue b/web/satellite/src/components/navigation/AccountArea.vue
index 3a2c2b389..7cfd21b6b 100644
--- a/web/satellite/src/components/navigation/AccountArea.vue
+++ b/web/satellite/src/components/navigation/AccountArea.vue
@@ -282,8 +282,8 @@ export default class AccountArea extends Vue {
                 font-weight: 600;
             }
 
-            &__left__icon path,
-            &__arrow path {
+            &__left__icon ::v-deep path,
+            &__arrow ::v-deep path {
                 fill: #0149ff;
             }
         }
diff --git a/web/satellite/src/components/navigation/NavigationArea.vue b/web/satellite/src/components/navigation/NavigationArea.vue
index 438b13a25..c57ece1e5 100644
--- a/web/satellite/src/components/navigation/NavigationArea.vue
+++ b/web/satellite/src/components/navigation/NavigationArea.vue
@@ -480,8 +480,8 @@ export default class NavigationArea extends Vue {
 
         .navigation-area__container__wrap__item-container {
 
-            &__left__image path,
-            &__arrow path {
+            &__left__image ::v-deep path,
+            &__arrow ::v-deep path {
                 fill: #0149ff;
             }
         }
@@ -494,7 +494,7 @@ export default class NavigationArea extends Vue {
         background-color: #f7f8fb;
         color: #0149ff;
 
-        .navigation-area__container__wrap__item-container__left__image path {
+        .navigation-area__container__wrap__item-container__left__image ::v-deep path {
             fill: #0149ff;
         }
     }
diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue
index 8d451c53b..63ecd6501 100644
--- a/web/satellite/src/components/navigation/ProjectSelection.vue
+++ b/web/satellite/src/components/navigation/ProjectSelection.vue
@@ -377,7 +377,7 @@ export default class ProjectSelection extends Vue {
             font-weight: 600;
         }
 
-        svg path {
+        svg ::v-deep path {
             fill: #0149ff;
         }
     }
diff --git a/web/satellite/src/components/objects/BucketItem.vue b/web/satellite/src/components/objects/BucketItem.vue
index fcd81cea0..77f7d0d71 100644
--- a/web/satellite/src/components/objects/BucketItem.vue
+++ b/web/satellite/src/components/objects/BucketItem.vue
@@ -151,7 +151,7 @@ export default class BucketItem extends Vue {
                         background-color: #f4f5f7;
                         font-family: 'font_medium', sans-serif;
 
-                        & svg path {
+                        svg ::v-deep path {
                             fill: #0068dc;
                             stroke: #0068dc;
                         }
diff --git a/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue b/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
index 71ae599f6..3aae638d0 100644
--- a/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
@@ -118,7 +118,7 @@ export default class DateRangeSelection extends Vue {
             color: #0149ff;
         }
 
-        svg path {
+        svg ::v-deep path {
             fill: #0149ff;
         }
     }
diff --git a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
index 9482f95cc..81fd343bc 100644
--- a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
@@ -613,11 +613,8 @@ export default class NewProjectDashboard extends Vue {
             margin-right: 9px;
         }
 
-        &:hover {
-
-            svg path {
-                fill: #fff;
-            }
+        &:hover svg ::v-deep path {
+            fill: #fff;
         }
     }
 
diff --git a/web/storagenode/src/app/App.vue b/web/storagenode/src/app/App.vue
index 6ad44f4da..ca600dc0e 100644
--- a/web/storagenode/src/app/App.vue
+++ b/web/storagenode/src/app/App.vue
@@ -132,11 +132,8 @@ export default class App extends Vue {
         overflow-y: scroll;
     }
 
-    .back-button {
-
-        path {
-            fill: var(--regular-icon-color) !important;
-        }
+    .back-button ::v-deep path {
+        fill: var(--regular-icon-color) !important;
     }
 
     .js-loading *,
diff --git a/web/storagenode/src/app/components/AllSatellitesAuditsArea.vue b/web/storagenode/src/app/components/AllSatellitesAuditsArea.vue
index 64ccfb554..e9def33fe 100644
--- a/web/storagenode/src/app/components/AllSatellitesAuditsArea.vue
+++ b/web/storagenode/src/app/components/AllSatellitesAuditsArea.vue
@@ -164,7 +164,7 @@ export default class AllSatellitesAuditsArea extends Vue {
     .disqualification {
         color: var(--critical-color);
 
-        path {
+        ::v-deep path {
             fill: var(--critical-color);
         }
     }
@@ -172,7 +172,7 @@ export default class AllSatellitesAuditsArea extends Vue {
     .warning {
         color: var(--warning-color);
 
-        path {
+        ::v-deep path {
             fill: var(--warning-color);
         }
     }
diff --git a/web/storagenode/src/app/components/LoadingScreen.vue b/web/storagenode/src/app/components/LoadingScreen.vue
index cf90e2ca9..7f856becf 100644
--- a/web/storagenode/src/app/components/LoadingScreen.vue
+++ b/web/storagenode/src/app/components/LoadingScreen.vue
@@ -49,11 +49,8 @@ export default class LoadingScreen extends Vue {}
         }
     }
 
-    .storj-logo {
-
-        path {
-            fill: var(--loader-logo-color);
-        }
+    .storj-logo ::v-deep path {
+        fill: var(--loader-logo-color);
     }
 
     .loader {
diff --git a/web/storagenode/src/app/components/SNOContentTitle.vue b/web/storagenode/src/app/components/SNOContentTitle.vue
index 0b56fb735..66496f6fd 100644
--- a/web/storagenode/src/app/components/SNOContentTitle.vue
+++ b/web/storagenode/src/app/components/SNOContentTitle.vue
@@ -181,11 +181,8 @@ export default class SNOContentTitle extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .svg {
-
-        path {
-            fill: var(--node-id-copy-icon-color);
-        }
+    .svg ::v-deep path {
+        fill: var(--node-id-copy-icon-color);
     }
 
     .title-area {
@@ -224,11 +221,8 @@ export default class SNOContentTitle extends Vue {
                 border-color: var(--node-id-border-hover-color);
                 color: var(--node-id-hover-text-color);
 
-                .svg {
-
-                    path {
-                        fill: var(--node-id-border-hover-color) !important;
-                    }
+                .svg ::v-deep path {
+                    fill: var(--node-id-border-hover-color) !important;
                 }
             }
         }
diff --git a/web/storagenode/src/app/components/SNOFooter.vue b/web/storagenode/src/app/components/SNOFooter.vue
index 623d18cc7..080917bbc 100644
--- a/web/storagenode/src/app/components/SNOFooter.vue
+++ b/web/storagenode/src/app/components/SNOFooter.vue
@@ -99,11 +99,8 @@ export default class SNOFooter extends Vue {
         }
     }
 
-    .storj-logo {
-
-        path {
-            fill: var(--icon-color) !important;
-        }
+    .storj-logo ::v-deep path {
+        fill: var(--icon-color) !important;
     }
 
     @media screen and (max-width: 600px) {
diff --git a/web/storagenode/src/app/components/SNOHeader.vue b/web/storagenode/src/app/components/SNOHeader.vue
index cb9628f5e..ea14f9073 100644
--- a/web/storagenode/src/app/components/SNOHeader.vue
+++ b/web/storagenode/src/app/components/SNOHeader.vue
@@ -212,18 +212,12 @@ export default class SNOHeader extends Vue {
 </script>
 
 <style scoped lang="scss">
-    .svg {
-
-        path {
-            fill: var(--node-id-copy-icon-color);
-        }
+    .svg ::v-deep path {
+        fill: var(--node-id-copy-icon-color);
     }
 
-    .storj-logo {
-
-        path {
-            fill: var(--icon-color) !important;
-        }
+    .storj-logo ::v-deep path {
+        fill: var(--icon-color) !important;
     }
 
     .settings-icon {
@@ -233,11 +227,8 @@ export default class SNOHeader extends Vue {
         }
     }
 
-    .notifications-bell-icon {
-
-        path {
-            fill: var(--regular-icon-color) !important;
-        }
+    .notifications-bell-icon ::v-deep path {
+        fill: var(--regular-icon-color) !important;
     }
 
     .header {
@@ -329,11 +320,8 @@ export default class SNOHeader extends Vue {
                         border-color: var(--node-id-border-hover-color);
                         color: var(--node-id-hover-text-color);
 
-                        .svg {
-
-                            path {
-                                fill: var(--node-id-border-hover-color) !important;
-                            }
+                        .svg ::v-deep path {
+                            fill: var(--node-id-border-hover-color) !important;
                         }
                     }
                 }
diff --git a/web/storagenode/src/app/components/SatelliteSelection.vue b/web/storagenode/src/app/components/SatelliteSelection.vue
index c023c065e..28ea5cd20 100644
--- a/web/storagenode/src/app/components/SatelliteSelection.vue
+++ b/web/storagenode/src/app/components/SatelliteSelection.vue
@@ -161,11 +161,8 @@ export default class SatelliteSelection extends Vue {
                     cursor: pointer;
                     color: #133e9c;
 
-                    .svg {
-
-                        path {
-                            fill: #133e9c !important;
-                        }
+                    .svg ::v-deep path {
+                        fill: #133e9c !important;
                     }
                 }
             }
diff --git a/web/storagenode/src/app/components/SatelliteSelectionDropdownItem.vue b/web/storagenode/src/app/components/SatelliteSelectionDropdownItem.vue
index 318c76928..c41f58fe9 100644
--- a/web/storagenode/src/app/components/SatelliteSelectionDropdownItem.vue
+++ b/web/storagenode/src/app/components/SatelliteSelectionDropdownItem.vue
@@ -165,11 +165,8 @@ export default class SatelliteSelectionDropdownItem extends Vue {
                     cursor: pointer;
                     color: #133e9c;
 
-                    .svg {
-
-                        path {
-                            fill: #133e9c !important;
-                        }
+                    .svg ::v-deep path {
+                        fill: #133e9c !important;
                     }
                 }
             }
diff --git a/web/storagenode/src/app/components/WalletArea.vue b/web/storagenode/src/app/components/WalletArea.vue
index a155feaf6..45860a95d 100644
--- a/web/storagenode/src/app/components/WalletArea.vue
+++ b/web/storagenode/src/app/components/WalletArea.vue
@@ -149,7 +149,7 @@ export default class WalletArea extends Vue {
                     background: white;
                     border-radius: 50%;
 
-                    path {
+                    ::v-deep path {
                         fill: var(--wallet-feature-opted-in);
                     }
                 }
diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue
index d01141117..9bcc6c41f 100644
--- a/web/storagenode/src/app/components/payments/EstimationArea.vue
+++ b/web/storagenode/src/app/components/payments/EstimationArea.vue
@@ -774,7 +774,7 @@ export default class EstimationArea extends Vue {
             fill: var(--info-icon-background);
         }
 
-        path {
+        ::v-deep path {
             fill: var(--info-icon-letter);
         }
     }
diff --git a/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue b/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
index 5d911a4d8..2a4f6fc31 100644
--- a/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
+++ b/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
@@ -109,11 +109,8 @@ export default class EstimationPeriodDropdown extends Vue {
         }
     }
 
-    .arrow {
-
-        path {
-            fill: var(--period-selection-arrow-color);
-        }
+    .arrow ::v-deep path {
+        fill: var(--period-selection-arrow-color);
     }
 
     .short-text {
@@ -129,11 +126,8 @@ export default class EstimationPeriodDropdown extends Vue {
             }
         }
 
-        .arrow {
-
-            path {
-                fill: #909bad !important;
-            }
+        .arrow ::v-deep path {
+            fill: #909bad !important;
         }
     }
 
diff --git a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
index eede5967a..9fd1e49af 100644
--- a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
+++ b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
@@ -304,10 +304,7 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
         }
     }
 
-    .arrow-icon {
-
-        path {
-            fill: var(--year-selection-arrow-color);
-        }
+    .arrow-icon ::v-deep path {
+        fill: var(--year-selection-arrow-color);
     }
 </style>
diff --git a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodDropdown.vue b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodDropdown.vue
index f3f49daed..e41c20e5e 100644
--- a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodDropdown.vue
+++ b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodDropdown.vue
@@ -102,10 +102,7 @@ export default class PayoutHistoryPeriodDropdown extends Vue {
         }
     }
 
-    .arrow {
-
-        path {
-            fill: var(--period-selection-arrow-color);
-        }
+    .arrow ::v-deep path {
+        fill: var(--period-selection-arrow-color);
     }
 </style>
diff --git a/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue b/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
index 5f421ab74..90c79801e 100644
--- a/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
+++ b/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
@@ -313,7 +313,7 @@ export default class PayoutHistoryTableItem extends Vue {
                         &__icon {
                             margin-left: 7px;
 
-                            path {
+                            ::v-deep path {
                                 stroke: var(--navigation-link-color);
                             }
                         }
@@ -367,7 +367,7 @@ export default class PayoutHistoryTableItem extends Vue {
         min-width: 40px;
         min-height: 40px;
 
-        path {
+        ::v-deep path {
             fill: #909bad;
         }
     }
diff --git a/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue b/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
index c4eec9825..18c30371b 100644
--- a/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
+++ b/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
@@ -438,10 +438,7 @@ export default class PayoutPeriodCalendar extends Vue {
         }
     }
 
-    .arrow-icon {
-
-        path {
-            fill: var(--year-selection-arrow-color);
-        }
+    .arrow-icon ::v-deep path {
+        fill: var(--year-selection-arrow-color);
     }
 </style>
diff --git a/web/storagenode/src/app/views/NotificationsArea.vue b/web/storagenode/src/app/views/NotificationsArea.vue
index b0ae71e77..681c66de0 100644
--- a/web/storagenode/src/app/views/NotificationsArea.vue
+++ b/web/storagenode/src/app/views/NotificationsArea.vue
@@ -221,7 +221,7 @@ export default class NotificationsArea extends Vue {
         background-color: var(--disabled-background-color);
         pointer-events: none;
 
-        .notifications-container__header__button__svg path {
+        .notifications-container__header__button__svg ::v-deep path {
             fill: #979ba7 !important;
         }