diff --git a/docs/en-US/component/page-header.md b/docs/en-US/component/page-header.md
index e5a6897f7d..b3af74d956 100644
--- a/docs/en-US/component/page-header.md
+++ b/docs/en-US/component/page-header.md
@@ -39,7 +39,7 @@ page-header/custom-icon
 ## No icon
 
 Sometimes the page is just full of elements, and you might not want the icon to show up on the page,
-you can set the `icon` attribute to `null` to get rid of it.
+you can set the `icon` attribute to `""` to get rid of it.
 
 :::demo
 
diff --git a/docs/examples/page-header/additional-sections.vue b/docs/examples/page-header/additional-sections.vue
index d05c0315b9..b6f50580ef 100644
--- a/docs/examples/page-header/additional-sections.vue
+++ b/docs/examples/page-header/additional-sections.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-page-header :icon="null">
+  <el-page-header icon="">
     <template #content>
       <div class="flex items-center">
         <el-avatar
diff --git a/docs/examples/page-header/no-icon.vue b/docs/examples/page-header/no-icon.vue
index bec616ecc2..2bc80de645 100644
--- a/docs/examples/page-header/no-icon.vue
+++ b/docs/examples/page-header/no-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-page-header :icon="null">
+  <el-page-header icon="">
     <template #content>
       <span class="text-large font-600 mr-3"> Title </span>
     </template>