diff --git a/docs/.vitepress/vitepress/components/icons/copy-icon.vue b/docs/.vitepress/vitepress/components/icons/copy-icon.vue
index 867af831ba..c49f4a23d3 100644
--- a/docs/.vitepress/vitepress/components/icons/copy-icon.vue
+++ b/docs/.vitepress/vitepress/components/icons/copy-icon.vue
@@ -1,8 +1,13 @@
 <template>
-  <svg viewBox="0 0 24 24">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
     <path
       d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"
-      fill="currentColor"
-    ></path>
+    />
   </svg>
 </template>
diff --git a/docs/.vitepress/vitepress/components/icons/github.vue b/docs/.vitepress/vitepress/components/icons/github.vue
index 0346d41179..4e63addb74 100644
--- a/docs/.vitepress/vitepress/components/icons/github.vue
+++ b/docs/.vitepress/vitepress/components/icons/github.vue
@@ -1,14 +1,18 @@
 <template>
-  <svg viewBox="0 0 16 16">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
     <path
-      fillRule="evenodd"
-      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-      fill="currentColor"
-    ></path>
+      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
+    />
   </svg>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'GithubIcon',
 }
diff --git a/docs/.vitepress/vitepress/components/icons/play-circle-line.vue b/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
new file mode 100644
index 0000000000..c0f92454ff
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'PlayCircleLineIcon',
+})
+</script>
diff --git a/docs/.vitepress/vitepress/components/icons/source-code.vue b/docs/.vitepress/vitepress/components/icons/source-code.vue
index e1e20664e7..75abfdce79 100644
--- a/docs/.vitepress/vitepress/components/icons/source-code.vue
+++ b/docs/.vitepress/vitepress/components/icons/source-code.vue
@@ -1,8 +1,13 @@
 <template>
-  <svg viewBox="0 0 24 24">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
     <path
-      d="M8.7 15.9L4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4a.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4zm6.6 0l3.9-3.9l-3.9-3.9a.984.984 0 0 1 0-1.4a.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0a.984.984 0 0 1 0-1.4z"
-      fill="currentColor"
-    ></path>
+      d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"
+    />
   </svg>
 </template>
diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
index bceeff9471..e0eafd12a9 100644
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -9,7 +9,7 @@ import { usePlayGround } from '../composables/use-playground'
 import demoBlockLocale from '../../i18n/component/demo-block.json'
 import GithubIcon from './icons/github.vue'
 import SourceCodeIcon from './icons/source-code.vue'
-import PlayGroundIcon from './icons/playground.vue'
+import PlayCircleLine from './icons/play-circle-line.vue'
 import CopyIcon from './icons/copy-icon.vue'
 
 import Example from './demo/vp-example.vue'
@@ -85,7 +85,7 @@ const decodedDescription = computed(() =>
   decodeURIComponent(props.description!)
 )
 
-const onCodepenClicked = () => {
+const onPlaygroundClicked = () => {
   const code = usePlayGround(props.rawSource)
   window.open(`https://element-plus.run/#${code}`)
 }
@@ -112,7 +112,7 @@ const copyCode = async () => {
       <div class="op-btns">
         <ElTooltip :content="locale['edit-in-editor']" :visible-arrow="false">
           <ElIcon :size="20" class="op-btn">
-            <PlayGroundIcon @click="onCodepenClicked" />
+            <PlayCircleLine @click="onPlaygroundClicked" />
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['edit-on-github']" :visible-arrow="false">