diff --git a/theme/src/client/components/VPIcon.vue b/theme/src/client/components/VPIcon.vue
index 13a2d474..936b35d7 100644
--- a/theme/src/client/components/VPIcon.vue
+++ b/theme/src/client/components/VPIcon.vue
@@ -65,7 +65,8 @@ const binding = computed(() => ({
 <template>
   <VPIconImage
     v-if="type === 'link' || type === 'svg'"
-    :type="type" :name="name" :color="color" :size="rect"
+    :type="type"
+    v-bind="binding"
   />
   <VPIconfont
     v-else-if="type === 'iconfont'"
diff --git a/theme/src/client/components/VPIconImage.vue b/theme/src/client/components/VPIconImage.vue
index 12ea66bd..0024e276 100644
--- a/theme/src/client/components/VPIconImage.vue
+++ b/theme/src/client/components/VPIconImage.vue
@@ -3,6 +3,10 @@ import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { type, name, color, size } = defineProps<{
   type: 'link' | 'svg'
   name: string | { svg: string }
@@ -31,7 +35,7 @@ const link = computed(() => {
   </span>
   <span
     v-else-if="type === 'svg'"
-    class="vp-icon"
+    class="vp-icon is-svg"
     :style="{ color, ...size }"
     aria-hidden
     v-html="svg"
@@ -50,4 +54,9 @@ const link = computed(() => {
 .vp-icon-img img {
   height: 100%;
 }
+
+.vp-icon.is-svg :deep(svg) {
+  width: inherit;
+  height: inherit;
+}
 </style>
diff --git a/theme/src/client/components/VPSocialLink.vue b/theme/src/client/components/VPSocialLink.vue
index bc5422e3..fe682a6e 100644
--- a/theme/src/client/components/VPSocialLink.vue
+++ b/theme/src/client/components/VPSocialLink.vue
@@ -56,8 +56,8 @@ const label = computed(() => {
   color: var(--vp-c-text-1);
 }
 
-.vp-social-link > :deep(svg),
-.vp-social-link > :deep([class*="vpi-"]) {
+.vp-social-link > :deep([class*="vpi-"]),
+.vp-social-link > :deep(.vp-icon.is-svg) {
   width: 20px;
   height: 20px;
   fill: currentcolor;