diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
index 71c255e1f1..4ad2f334d2 100644
--- a/docs/content/3.forms/7.toggle.md
+++ b/docs/content/3.forms/7.toggle.md
@@ -10,6 +10,21 @@ headlessui:
 ::component-card
 ::
 
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  iconOn: 'i-heroicons-check-20-solid'
+  iconOff: 'i-heroicons-x-mark-20-solid'
+excludedProps:
+  - iconOn
+  - iconOff
+---
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 532477bcf8..d7721e63f2 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -7,7 +7,7 @@
       <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOn" :class="ui.icon.on" />
       </span>
-      <span v-if="iconOff" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="iconOff" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOff" :class="ui.icon.off" />
       </span>
     </span>