diff --git a/docs/components/tree-item.md b/docs/components/tree-item.md
index 8dd3d6995..5a3cc753f 100644
--- a/docs/components/tree-item.md
+++ b/docs/components/tree-item.md
@@ -79,4 +79,17 @@ a `sl-lazy-load` event is emitted.
 <sl-tree-item lazy> Parent Node </sl-tree-item>
 ```
 
+### Indentation size
+
+Use the `--indentation-size` custom property to set the tree item's indentation.
+
+```html preview
+<sl-tree-item style="--indentation-size: 3rem" expanded>
+  Parent Node
+  <sl-tree-item> Child 1 </sl-tree-item>
+  <sl-tree-item> Child 2 </sl-tree-item>
+  <sl-tree-item> Child 3 </sl-tree-item>
+</sl-tree-item>
+```
+
 [component-metadata:sl-tree-item]
diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 2609a0d1c..e4c0c750f 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -55,10 +55,11 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    box-sizing: content-box;
     color: var(--sl-color-neutral-400);
     padding: var(--sl-spacing-x-small);
-    width: 2rem;
-    height: 2rem;
+    width: 1rem;
+    height: 1rem;
   }
 
   .tree-item__item {