diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
index 06d40a6526..c40c337a4f 100644
--- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
+++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html
@@ -19,7 +19,7 @@
         <ng-container
           [ngTemplateOutlet]="toggleTemplate"
           [ngTemplateOutletContext]="{
-            biggerPaddingStart: '-' + biggerPaddingStart,
+            biggerPaddingStart: negativeBiggerPaddingStart,
             paddingStart: paddingStart,
             toggleIcon: 'si-tree-view-item-dropdown-caret'
           }"
diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
index 1cdd42e0d9..8e265144ba 100644
--- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
+++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts
@@ -192,19 +192,27 @@ export class SiTreeViewItemComponent implements OnInit, AfterViewInit, Focusable
 
   protected readonly deleteChildrenOnCollapse = this.treeViewComponent.deleteChildrenOnCollapse;
 
-  protected get paddingStart(): string {
+  private get indentation(): number {
     return this.siTreeViewService.groupedList
-      ? '0'
-      : this.indentLevel * this.siTreeViewService.childrenIndentation + 'px';
+      ? 0
+      : this.indentLevel * this.siTreeViewService.childrenIndentation;
+  }
+
+  protected get paddingStart(): string {
+    return `${this.indentation}px`;
   }
 
+  /** Indentation plus the space the start toggle occupies, so leaf items align with foldable ones. */
   protected get biggerPaddingStart(): string {
-    const basePadding = this.showFolderStateStart ? 24 : 0;
-    return (
-      (this.siTreeViewService.groupedList
-        ? basePadding
-        : this.indentLevel * this.siTreeViewService.childrenIndentation + basePadding) + 'px'
-    );
+    return this.showFolderStateStart
+      ? `calc(${this.indentation}px + var(--si-tree-view-icon-size))`
+      : `${this.indentation}px`;
+  }
+
+  protected get negativeBiggerPaddingStart(): string {
+    return this.showFolderStateStart
+      ? `calc(${-this.indentation}px - var(--si-tree-view-icon-size))`
+      : `${-this.indentation}px`;
   }
 
   protected get isGroupedItem(): boolean {