diff --git a/docs/en/index.md b/docs/en/index.md
index ce9015b2..9339e426 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -10,12 +10,19 @@ hero:
     - theme: brand
       text: What is VitePress?
       link: ./guide/what-is-vitepress
+      startIcon: 
+        src: /vitepress-logo-mini.svg
+        width: 18
+        height: 18
+      endIcon: 
     - theme: alt
       text: Quickstart
       link: ./guide/getting-started
     - theme: alt
       text: GitHub
       link: https://github.com/vuejs/vitepress
+      startIcon: <span class="vpi-social-github" />
+      endIcon: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"/></svg>
   image:
     src: /vitepress-logo-large.svg
     alt: VitePress
diff --git a/docs/en/reference/default-theme-home-page.md b/docs/en/reference/default-theme-home-page.md
index a0392aa0..3e35a84c 100644
--- a/docs/en/reference/default-theme-home-page.md
+++ b/docs/en/reference/default-theme-home-page.md
@@ -79,7 +79,24 @@ interface HeroAction {
 
   // Link rel attribute.
   rel?: string
+
+  // Show the left icon on action button.
+  startIcon?: ActionIcon
+
+  // Show the right icon on action button.
+  endIcon?: ActionIcon
 }
+
+type ActionIcon =
+  | string
+  | { src: string; alt?: string; width?: string; height: string }
+  | {
+      light: string
+      dark: string
+      alt?: string
+      width?: string
+      height: string
+    }
 ```
 
 ### Customizing the name color
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index d0a5de70..d7dc1ada 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { DefaultTheme } from 'vitepress/theme'
 import { normalizeLink } from '../support/utils'
 import { EXTERNAL_URL_RE } from '../../shared'
+import VPImage from './VPImage.vue'
 
 interface Props {
   tag?: string
@@ -11,6 +13,8 @@ interface Props {
   href?: string
   target?: string;
   rel?: string;
+  startIcon?: DefaultTheme.ActionIcon;
+  endIcon?: DefaultTheme.ActionIcon;
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
@@ -35,13 +39,35 @@ const component = computed(() => {
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
+    <span class="start-icon" v-if="startIcon">
+      <VPImage
+        v-if="typeof startIcon === 'object'"
+        :image="startIcon"
+        :alt="startIcon.alt"
+        :height="startIcon.height || 32"
+        :width="startIcon.width || 32"
+      />
+      <span v-else-if="startIcon" class="icon" v-html="startIcon"></span>
+    </span>
     <slot>{{ text }}</slot>
+    <span class="end-icon" v-if="endIcon">
+      <VPImage
+        v-if="typeof endIcon === 'object'"
+        :image="endIcon"
+        :alt="endIcon.alt"
+        :height="endIcon.height || 32"
+        :width="endIcon.width || 32"
+      />
+      <span v-else-if="endIcon" class="icon" v-html="endIcon"></span>
+    </span>
   </component>
 </template>
 
 <style scoped>
 .VPButton {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;
@@ -120,4 +146,23 @@ const component = computed(() => {
   color: var(--vp-button-sponsor-active-text);
   background-color: var(--vp-button-sponsor-active-bg);
 }
+
+.VPButton:only-child{
+  grid-template-columns: 1fr;
+  grid-gap: 0;
+}
+
+.icon{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.start-icon {
+  margin-right: 8px;
+}
+
+.end-icon {
+  margin-left: 8px;
+}
 </style>
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index adb4db47..74e38732 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -11,6 +11,8 @@ export interface HeroAction {
   link: string
   target?: string
   rel?: string
+  startIcon?: DefaultTheme.ActionIcon
+  endIcon?: DefaultTheme.ActionIcon
 }
 
 defineProps<{
@@ -52,6 +54,8 @@ const { heroImageSlotExists } = inject(
               :href="action.link"
               :target="action.target"
               :rel="action.rel"
+              :start-icon="action.startIcon"
+              :end-icon="action.endIcon"
             />
           </div>
         </div>
diff --git a/src/node/init/init.ts b/src/node/init/init.ts
index 71120541..a949e599 100644
--- a/src/node/init/init.ts
+++ b/src/node/init/init.ts
@@ -47,11 +47,17 @@ export async function init(root?: string) {
 
         return text({
           message: 'Where should VitePress initialize the config?',
-          initialValue: './',
           defaultValue: './',
-          validate() {
-            // TODO make sure directory is inside
-            return undefined
+          initialValue: './',
+          validate(value) {
+            const inputRoot = path.resolve(value)
+            const currentRoot = path.resolve()
+            if (!inputRoot.startsWith(currentRoot)) {
+              return 'Please make sure directory is inside'
+            }
+            if (inputRoot != currentRoot && fs.pathExistsSync(inputRoot)) {
+              return `${value} already exists`
+            }
           }
         })
       },
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 7f648ca0..e77bfcb5 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -220,6 +220,22 @@ export namespace DefaultTheme {
         wrap?: boolean
       }
 
+  export type ActionIcon =
+    | string
+    | {
+        src: string
+        alt?: string
+        width?: string
+        height?: string
+      }
+    | {
+        light: string
+        dark: string
+        alt?: string
+        width?: string
+        height?: string
+      }
+
   // sidebar -------------------------------------------------------------------
 
   export type Sidebar = SidebarItem[] | SidebarMulti