diff --git a/devui/tree/src/tree-node-content.tsx b/devui/tree/src/tree-node-content.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6a3b2eabb9adcd97006acd0685e2d12e246d6fa
--- /dev/null
+++ b/devui/tree/src/tree-node-content.tsx
@@ -0,0 +1,22 @@
+import { defineComponent, h, inject } from 'vue';
+import { TreeRootType } from './tree-types';
+
+export default defineComponent({
+  name: 'DTreeNodeContent',
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const tree = inject<TreeRootType>('treeRoot');
+    return () => {
+      const node = props.node;
+      const { disabled, label } = node;
+      return tree.ctx.slots.default
+        ? tree.ctx.slots.default({ node })
+        : <span class={['devui-tree-node__title', disabled && 'select-disabled']}>{ label }</span>;
+    };
+  },
+});
diff --git a/devui/tree/src/tree-types.ts b/devui/tree/src/tree-types.ts
index 1af7c611a55f22af2c21479f717c0115f772f71f..09304c4cf0083a20f746dd204fb9b7319c7d1426 100644
--- a/devui/tree/src/tree-types.ts
+++ b/devui/tree/src/tree-types.ts
@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes, SetupContext } from 'vue'
 
 export interface TreeItem {
   label: string
@@ -17,3 +17,8 @@ export const treeProps = {
 } as const
 
 export type TreeProps = ExtractPropTypes<typeof treeProps>
+
+export interface TreeRootType {
+  ctx: SetupContext<any>
+  props: TreeProps
+}
\ No newline at end of file
diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx
index 0d7fae875a7f2bb3fe14f82ef15542b46bd4ce04..0f65be8cd70d9173ef8809170c33842f2242d354 100644
--- a/devui/tree/src/tree.tsx
+++ b/devui/tree/src/tree.tsx
@@ -1,18 +1,19 @@
-import { defineComponent, toRefs } from 'vue'
-import { treeProps, TreeProps } from './tree-types'
+import { defineComponent, toRefs, provide } from 'vue'
+import { treeProps, TreeProps, TreeRootType } from './tree-types'
 import { flatten } from './util'
 import useToggle from './composables/use-toggle'
 import useMergeNode from './composables/use-merge-node'
 import useHighlightNode from './composables/use-highlight'
 import IconOpen from './assets/open.svg'
 import IconClose from './assets/close.svg'
+import NodeContent from './tree-node-content'
 import './tree.scss'
 
 export default defineComponent({
   name: 'DTree',
   props: treeProps,
   emits: [],
-  setup(props: TreeProps) {
+  setup(props: TreeProps, ctx) {
     const { data } = toRefs(props)
     const flatData = flatten(data.value)
 
@@ -21,6 +22,7 @@ export default defineComponent({
     const { openedData, toggle } = useToggle(mergeData.value)
     const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode()
 
+    provide<TreeRootType>('treeRoot', { ctx, props });
     const Indent = () => {
       return <span style="display: inline-block; width: 16px; height: 16px;"></span>
     }
@@ -46,9 +48,7 @@ export default defineComponent({
                     : <IconClose class="mr-xs" onClick={(target) => toggle(target, item)} />
                   : <Indent />
               }
-              <span class={['devui-tree-node__title', disabled && 'select-disabled']}>
-                { label }
-              </span>
+              <NodeContent node={item}/>
             </div>
           </div>
         </div>
diff --git a/docs/components/tree/index.md b/docs/components/tree/index.md
index f2c350b69f3621f65a0f17cb3c26b670e69cc2f1..a9969358f2f829a0928a5baa3b2f7a5b212193a5 100644
--- a/docs/components/tree/index.md
+++ b/docs/components/tree/index.md
@@ -270,4 +270,220 @@ export default defineComponent({
 })
 </script>
 ```
+:::
+
+### 自定义图标
+
+:::demo 自定义操作按钮图标、节点图标。
+
+```vue
+<template>
+  <div style="width: 100%">
+    <div class="tree-title">
+      <h4>Node</h4>
+      <h4>Status</h4>
+    </div>
+    <d-tree :data="data">
+      <template #default="{ node }">
+        <span :class="[node?.data?.type && 'my-icon', node?.data?.type]" ></span>
+        <span class="op-title">{{ node.label }}</span>
+        <span class="op-status"></span>
+        <span class="op-icons icon icon-add"></span>
+        <span class="op-icons icon icon-edit"></span>
+        <span class="op-icons icon icon-close"></span>
+        <span class="op-right">{{ node.status }}</span>
+      </template>
+    </d-tree>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+
+    const data = ref([
+      {
+        label: "parent node 1",
+        data: { type: "mix" },
+        open: true,
+        status: "status1",
+        children: [
+          {
+            label: "leaf node 1-1",
+            data: { type: "mix" },
+            open: false,
+            status: "status1",
+            children: [
+              {
+                label: "leaf node 1-1-1",
+                data: { type: "ppt" },
+                status: "status2",
+              },
+              {
+                label: "leaf node 1-1-2",
+                data: { type: "xls" },
+                status: "status2",
+              },
+            ],
+          },
+          {
+            label: "leaf node 1-2",
+            data: { type: "mix" },
+            open: false,
+            status: "status1",
+            children: [
+              {
+                label: "leaf node 1-2-1",
+                data: { type: "ppt" },
+                status: "status2",
+              },
+              {
+                label: "leaf node 1-2-2",
+                data: { type: "doc" },
+                status: "status2",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "parent node 2",
+        data: { type: "ppt" },
+        open: false,
+        status: "status1",
+        children: [
+          {
+            label: "leaf node 2-1",
+            data: { type: "ppt" },
+            status: "status1",
+          },
+          {
+            label: "leaf node 2-2",
+            data: { type: "ppt" },
+            status: "status1",
+          },
+        ],
+      },
+      {
+        label: "parent node 3",
+        data: { type: "xls" },
+        open: false,
+        status: "status1",
+        children: [
+          {
+            label: "leaf node 3-1",
+            data: { type: "xls" },
+            status: "status1",
+          },
+          {
+            label: "leaf node 3-2",
+            data: { type: "xls" },
+            status: "status1",
+          },
+        ],
+      },
+    ]);
+    
+    return {
+      data
+    }
+  }
+})
+</script>
+<style>
+
+.my-icon::before {
+  width: 16px;
+  height: 16px;
+  font-style: italic;
+  font-size: 12px;
+  line-height: 14px;
+  display: inline-block;
+  text-align: center;
+  color: #fff;
+  border-radius: 2px;
+}
+
+.my-icon.doc::before {
+  content: 'W';
+  background-color: #295396;
+  border: 1px #224488 solid;
+}
+
+.my-icon.pdf::before {
+  content: 'A';
+  background-color: #da0a0a;
+  border: 1px #dd0000 solid;
+}
+
+.my-icon.xls::before {
+  content: 'X';
+  background-color: #207044;
+  border: 1px #18683c solid;
+}
+
+.my-icon.ppt::before {
+  content: 'P';
+  background-color: #d14424;
+  border: 1px #dd4422 solid;
+}
+
+.my-icon.mix::before {
+  content: '?';
+  font-style: normal;
+  background-color: #aaaaaa;
+  border: 1px #999999 solid;
+}
+
+.op-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.op-icons {
+  display: inline-block;
+  margin-left: 8px;
+  cursor: pointer;
+  color: #575d6c;
+  font-size: 16px;
+}
+
+.op-status {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #50d4ab;
+}
+
+.op-right {
+  position: absolute;
+  right: 25px;
+}
+
+.status-position {
+  position: absolute;
+  right: 8px;
+}
+
+.tree-title {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 24px;
+  padding-right: 16px;
+}
+
+.op-icons:focus {
+  outline: none;
+}
+
+.devui-tree-node__edit {
+  margin: 0 8px;
+}
+
+
+</style>
+```
 :::
\ No newline at end of file