diff --git a/api/js/etemplate/Et2Tree/Et2Tree.styles.ts b/api/js/etemplate/Et2Tree/Et2Tree.styles.ts
index d50da6aafe..39214ca6bc 100644
--- a/api/js/etemplate/Et2Tree/Et2Tree.styles.ts
+++ b/api/js/etemplate/Et2Tree/Et2Tree.styles.ts
@@ -6,11 +6,19 @@ export default css`
 		display: block;
 	}
 
-
+/* Style expand and collapse buttons so we can use technically larger images to increase clickable surface*/
 	::part(expand-button) {
 		rotate: none;
 		padding: 0 var(--sl-spacing-small);
+        width: 5em;
+        height: 1.2em;
+        margin-left: -2.4em;
+        margin-right: calc(-2em + 10px);
 	}
+    sl-icon[slot='collapse-icon'],sl-icon[slot='expand-icon']{
+        width: inherit;
+        height: inherit;
+    }
 
 	/* Stop icon from shrinking if there's not enough space */
 	/* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/
diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts
index a3de61e3bc..5a19413c8d 100644
--- a/api/js/etemplate/Et2Tree/Et2Tree.ts
+++ b/api/js/etemplate/Et2Tree/Et2Tree.ts
@@ -1112,8 +1112,8 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
                     @dragleave=${(event) => {this.handleDragEvent(event);}}
 					@drop=${(event) => {this.handleDragEvent(event);}}
             >
-				<sl-icon name="chevron-right" slot="expand-icon"></sl-icon>
-				<sl-icon name="chevron-down" slot="collapse-icon"></sl-icon>
+				<sl-icon src="${this.egw().image("bi-chevron-right")}" slot="expand-icon"></sl-icon>
+				<sl-icon src="${this.egw().image("bi-chevron-down")}" slot="collapse-icon"></sl-icon>
                 <slot></slot>
                 ${repeat(this._selectOptions, (o) => o.value, this._optionTemplate)}
             </sl-tree>
diff --git a/api/templates/default/images/bi-chevron-down.svg b/api/templates/default/images/bi-chevron-down.svg
new file mode 100644
index 0000000000..6256e333bd
--- /dev/null
+++ b/api/templates/default/images/bi-chevron-down.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 1 16">
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"></path>
+</svg>
diff --git a/api/templates/default/images/bi-chevron-right.svg b/api/templates/default/images/bi-chevron-right.svg
new file mode 100644
index 0000000000..62917544c0
--- /dev/null
+++ b/api/templates/default/images/bi-chevron-right.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 1 16">
+ <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"></path>
+</svg>