diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index af8a5b67a1..d2bfe23e30 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -81,7 +81,9 @@ export const config: Config = {
         'ion-modal',
         'ion-picker',
         'ion-popover',
-        'ion-toast'
+        'ion-toast',
+
+        'ion-icon'
       ],
       routerLinkComponents: [
         'ion-card',
diff --git a/packages/vue/src/components/IonIcon.ts b/packages/vue/src/components/IonIcon.ts
new file mode 100644
index 0000000000..3a9e5d4723
--- /dev/null
+++ b/packages/vue/src/components/IonIcon.ts
@@ -0,0 +1,44 @@
+import { h, defineComponent } from 'vue';
+import { isPlatform } from '@ionic/core';
+
+export const IonIcon = defineComponent({
+  name: 'IonIcon',
+  props: {
+    ariaLabel: String,
+    color: String,
+    flipRtl: Boolean,
+    icon: String,
+    ios: String,
+    lazy: String,
+    md: String,
+    mode: String,
+    name: String,
+    size: String,
+    src: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const { icon, ios, md } = props;
+
+      let iconToUse: typeof icon;
+      if (ios || md) {
+        if (isPlatform('ios')) {
+          iconToUse = ios ?? md ?? icon;
+        } else {
+          iconToUse = md ?? ios ?? icon;
+        }
+      } else {
+        iconToUse = icon;
+      }
+
+      return h(
+        'ion-icon',
+        {
+          ...props,
+          icon: iconToUse
+        },
+        slots
+      )
+    }
+  }
+});
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index d489b1c5ac..5732210616 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -10,6 +10,7 @@ export { IonRouterOutlet } from './components/IonRouterOutlet';
 export { IonTabButton } from './components/IonTabButton';
 export { IonTabs } from './components/IonTabs';
 export { IonTabBar } from './components/IonTabBar';
+export { IonIcon } from './components/IonIcon';
 export * from './components/Overlays';
 
 export { IonKeyboardRef, IonRouter, useBackButton, useIonRouter, useKeyboard } from './hooks';
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 58a4b18099..baa6f76682 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -248,21 +248,6 @@ export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-heade
 ]);
 
 
-export const IonIcon = /*@__PURE__*/ defineContainer<JSX.IonIcon>('ion-icon', [
-  'mode',
-  'color',
-  'ariaLabel',
-  'ios',
-  'md',
-  'flipRtl',
-  'name',
-  'src',
-  'icon',
-  'size',
-  'lazy'
-]);
-
-
 export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', [
   'alt',
   'src',