diff --git a/devtools/client/debugger/new/dist/debugger.css b/devtools/client/debugger/new/dist/debugger.css
index 08902cd44136..7b38e371c135 100644
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -1554,6 +1554,14 @@ span.img.marko {
   transition: transform 0.18s ease;
 }
 
+/* overrides tree component */
+.tree-node button.arrow {
+  background: none;
+  mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
+  background: var(--disclosure-arrow);
+  mask-size: 100%;
+}
+
 html[dir="rtl"] .img.arrow {
   transform: rotate(90deg);
 }
diff --git a/devtools/client/debugger/new/dist/vendors.css b/devtools/client/debugger/new/dist/vendors.css
index 61f50fb16f93..06fcd9c4ec94 100644
--- a/devtools/client/debugger/new/dist/vendors.css
+++ b/devtools/client/debugger/new/dist/vendors.css
@@ -525,6 +525,14 @@ span.img.marko {
   transition: transform 0.18s ease;
 }
 
+/* overrides tree component */
+.tree-node button.arrow {
+  background: none;
+  mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
+  background: var(--disclosure-arrow);
+  mask-size: 100%;
+}
+
 html[dir="rtl"] .img.arrow {
   transform: rotate(90deg);
 }
diff --git a/devtools/client/debugger/new/src/components/shared/Svg.css b/devtools/client/debugger/new/src/components/shared/Svg.css
index 96b2d7db3908..cff2551d7efb 100644
--- a/devtools/client/debugger/new/src/components/shared/Svg.css
+++ b/devtools/client/debugger/new/src/components/shared/Svg.css
@@ -348,6 +348,14 @@ span.img.marko {
   transition: transform 0.18s ease;
 }
 
+/* overrides tree component */
+.tree-node button.arrow {
+  background: none;
+  mask: url(/images/arrow.svg);
+  background: var(--disclosure-arrow);
+  mask-size: 100%;
+}
+
 html[dir="rtl"] .img.arrow {
   transform: rotate(90deg);
 }