diff --git a/packages/components/page-header/src/page-header.ts b/packages/components/page-header/src/page-header.ts
index 77cdd5fa22..7a589c811a 100644
--- a/packages/components/page-header/src/page-header.ts
+++ b/packages/components/page-header/src/page-header.ts
@@ -1,20 +1,24 @@
+import { iconPropType, buildProps } from '@element-plus/utils'
 import { Back } from '@element-plus/icons-vue'
-import type { ExtractPropTypes, PropType, Component } from 'vue'
+import type { ExtractPropTypes } from 'vue'
+import type PageHeader from './page-header.vue'
 
-export const pageHeaderProps = {
+export const pageHeaderProps = buildProps({
   icon: {
-    type: [String, Object] as PropType<string | Component>,
-    default: Back,
+    type: iconPropType,
+    default: () => Back,
   },
   title: String,
   content: {
     type: String,
     default: '',
   },
-} as const
+} as const)
 export type PageHeaderProps = ExtractPropTypes<typeof pageHeaderProps>
 
 export const pageHeaderEmits = {
   back: () => true,
 }
 export type PageHeaderEmits = typeof pageHeaderEmits
+
+export type PageHeaderInstance = InstanceType<typeof PageHeader>
diff --git a/packages/components/page-header/src/page-header.vue b/packages/components/page-header/src/page-header.vue
index 7510536fa5..262774d9a1 100644
--- a/packages/components/page-header/src/page-header.vue
+++ b/packages/components/page-header/src/page-header.vue
@@ -3,7 +3,9 @@
     <div :class="ns.e('left')" @click="handleClick">
       <div v-if="icon || $slots.icon" :class="ns.e('icon')">
         <slot name="icon">
-          <el-icon v-if="icon"><component :is="icon" /></el-icon>
+          <el-icon v-if="icon">
+            <component :is="icon" />
+          </el-icon>
         </slot>
       </div>
       <div :class="ns.e('title')">
@@ -15,36 +17,22 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { ElIcon } from '@element-plus/components/icon'
 
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { pageHeaderEmits, pageHeaderProps } from './page-header'
 
-export default defineComponent({
+defineOptions({
   name: 'ElPageHeader',
-
-  components: {
-    ElIcon,
-  },
-
-  props: pageHeaderProps,
-  emits: pageHeaderEmits,
-
-  setup(_, { emit }) {
-    const { t } = useLocale()
-    const ns = useNamespace('page-header')
-
-    function handleClick() {
-      emit('back')
-    }
-
-    return {
-      handleClick,
-      t,
-      ns,
-    }
-  },
 })
+defineProps(pageHeaderProps)
+const emit = defineEmits(pageHeaderEmits)
+
+const { t } = useLocale()
+const ns = useNamespace('page-header')
+
+function handleClick() {
+  emit('back')
+}
 </script>