diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index b8eb0e47208..950d9c48de1 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -413,6 +413,7 @@ describe('component props', () => {
         fn: { type: Function },
         skipCheck: { type: [Boolean, Function], skipCheck: true },
         empty: { type: [] },
+        foo: { type: Boolean },
       },
       setup() {
         return () => null
@@ -429,6 +430,7 @@ describe('component props', () => {
         fn: true,
         skipCheck: 'foo',
         empty: [1, 2, 3],
+        foo: Symbol(),
       }),
       nodeOps.createElement('div'),
     )
@@ -459,6 +461,9 @@ describe('component props', () => {
     expect(
       `Prop type [] for prop "empty" won't match anything. Did you mean to use type Array instead?`,
     ).toHaveBeenWarned()
+    expect(
+      `[Vue warn]: Invalid prop: type check failed for prop "foo". Expected Boolean, got Symbol`,
+    ).toHaveBeenWarned()
   })
 
   // #3495
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index 8baa7808665..5dd69398746 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -21,7 +21,9 @@ import {
   isOn,
   isReservedProp,
   isString,
+  isSymbol,
   makeMap,
+  stringifySymbol,
   toRawType,
 } from '@vue/shared'
 import { warn } from './warning'
@@ -795,6 +797,8 @@ function styleValue(value: unknown, type: string): string {
     return `"${value}"`
   } else if (type === 'Number') {
     return `${Number(value)}`
+  } else if (isSymbol(value)) {
+    return stringifySymbol(value)
   } else {
     return `${value}`
   }
diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index b23cf766a5c..ff5e088e636 100644
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -61,7 +61,7 @@ const replacer = (_key: string, val: unknown): any => {
   return val
 }
 
-const stringifySymbol = (v: unknown, i: number | string = ''): any =>
+export const stringifySymbol = (v: unknown, i: number | string = ''): any =>
   // Symbol.description in es2019+ so we need to cast here to pass
   // the lib: es2016 check
   isSymbol(v) ? `Symbol(${(v as any).description ?? i})` : v