diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index e6a5111e..878310e7 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -15,7 +15,7 @@
         <Icon
           v-if="link.icon"
           :name="link.icon"
-          :class="[iconBaseClass, isActive ? iconActiveClass : iconInactiveClass]"
+          :class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass]"
         />
       </slot>
       <slot :link="link">
@@ -61,6 +61,10 @@ export default {
       type: String,
       default: () => $ui.verticalNavigation.icon.base
     },
+    iconSpacingClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.icon.spacing
+    },
     iconActiveClass: {
       type: String,
       default: () => $ui.verticalNavigation.icon.active
diff --git a/src/runtime/presets/tailwindui.ts b/src/runtime/presets/tailwindui.ts
index b16d9a9d..e259bd24 100644
--- a/src/runtime/presets/tailwindui.ts
+++ b/src/runtime/presets/tailwindui.ts
@@ -255,7 +255,8 @@ const verticalNavigation = {
   active: 'u-text-gray-900 u-bg-gray-100',
   inactive: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50',
   icon: {
-    base: 'flex-shrink-0 -ml-1 mr-3 h-6 w-6',
+    base: 'flex-shrink-0 h-6 w-6',
+    spacing: '-ml-1 mr-3',
     active: 'u-text-gray-500',
     inactive: 'u-text-gray-400 group-hover:u-text-gray-500'
   },