diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 92231b735..20a3b1b23 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -301,6 +301,8 @@ $group-default-label-color: #a4a4a4;
 $tourGuide-border: #c56c6c;
 $tourGuide-heading-color: #c56c6c;
 
+$grip-color: #ccc;
+
 // Deprecated
 $text-color-green: $text-color-success;
 $info-text-code-color: $text-color-code;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index d26536102..dee89035a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -149,11 +149,27 @@
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background: $primary-background url(images/grip.svg) no-repeat 50% 50%;
+    background-color: $primary-background;
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px $shadow;
 
+    &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        -webkit-mask-image: url(images/grip.svg);
+        mask-image: url(images/grip.svg);
+        -webkit-mask-size: auto;
+        mask-size: auto;
+        -webkit-mask-position: 50% 50%;
+        mask-position: 50% 50%;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: $grip-color;
+    }
+    
     &.red-ui-tray-resize-maximised {
         background: $primary-background;
         cursor: default;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index 38ef78321..95d9210f4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -40,7 +40,23 @@
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background: $primary-background url(images/grip-horizontal.svg) no-repeat 50% 50%;
+    background-color: $primary-background;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        -webkit-mask-image: url(images/grip-horizontal.svg);
+        mask-image: url(images/grip-horizontal.svg);
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: $grip-color;
+    }
 }
 
 
@@ -70,6 +86,22 @@
         width: 7px;
         display: inline-block;
         cursor: ew-resize;
-        background: $primary-background url(images/grip.svg) no-repeat 50% 50%;
+        background-color: $primary-background;
     }
+
+        &:before {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 100%;
+            -webkit-mask-image: url(images/grip.svg);
+            mask-image: url(images/grip.svg);
+            -webkit-mask-size: contain;
+            mask-size: contain;
+            -webkit-mask-position: 50% 50%;
+            mask-position: 50% 50%;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            background-color: $grip-color;
+        }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index bd2677ea0..18b186bad 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -47,8 +47,24 @@
     bottom:10px;
     width: 7px;
     // z-index: 11;
-    background: $primary-background url(images/grip.svg) no-repeat 50% 50%;
+    background-color: $primary-background;
     cursor: col-resize;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        -webkit-mask-image: url(images/grip.svg);
+        mask-image: url(images/grip.svg);
+        -webkit-mask-size: auto;
+        mask-size: auto;
+        -webkit-mask-position: 50% 50%;
+        mask-position: 50% 50%;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: $grip-color;
+    }
 }
 
 .red-ui-sidebar-closed > #red-ui-sidebar { display: none; }