diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
index 8656cc88c5..0c3dce1433 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -33,6 +33,11 @@
 				:checked="isChecked"
 				:loading="loading">
 				<NcLoadingIcon v-if="loading" />
+				<NcIconToggleSwitch
+					v-else-if="isSwitchType"
+					:checked="isChecked"
+					:size="iconSize"
+					inline />
 				<component
 					:is="checkboxRadioIconElement"
 					v-else-if="!buttonVariant"
@@ -62,8 +67,7 @@ import CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'
 import MinusBox from 'vue-material-design-icons/MinusBox.vue'
 import RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 import RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
-import ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'
-import ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'
+import NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'
 import NcLoadingIcon from '../NcLoadingIcon/index.ts'
 
 export const TYPE_CHECKBOX = 'checkbox'
@@ -76,6 +80,7 @@ export default {
 
 	components: {
 		NcLoadingIcon,
+		NcIconToggleSwitch,
 	},
 
 	props: {
@@ -176,6 +181,10 @@ export default {
 			return this.type === TYPE_BUTTON
 		},
 
+		isSwitchType() {
+			return this.type === TYPE_SWITCH
+		},
+
 		/**
 		 * Returns the proper Material icon depending on the select case
 		 *
@@ -189,14 +198,6 @@ export default {
 				return RadioboxBlank
 			}
 
-			// Switch
-			if (this.type === TYPE_SWITCH) {
-				if (this.isChecked) {
-					return ToggleSwitch
-				}
-				return ToggleSwitchOff
-			}
-
 			// Checkbox
 			if (this.indeterminate) {
 				return MinusBox
@@ -242,6 +243,7 @@ export default {
 	&-radio:not(&--button-variant) &__icon,
 	&-switch:not(&--button-variant) &__icon {
 		margin-block: calc((var(--default-clickable-area) - 2 * var(--default-grid-baseline) - var(--icon-height)) / 2) auto;
+		line-height: 0;
 	}
 
 	&-checkbox:not(&--button-variant) &__icon--has-description,
diff --git a/src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue b/src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue
index 2100079f46..adc3ac986e 100644
--- a/src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue
+++ b/src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue
@@ -6,10 +6,9 @@
 <script setup lang="ts">
 import type { Slot } from 'vue'
 
-import { mdiToggleSwitch, mdiToggleSwitchOff } from '@mdi/js'
 import { watch } from 'vue'
 import NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+import NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'
 import { createElementId } from '../../utils/createElementId.ts'
 
 /** Switch toggle model value */
@@ -80,11 +79,7 @@ watch(modelValue, () => {
 				role="switch"
 				:aria-describedby="descriptionId"
 				:disabled>
-			<NcIconSvgWrapper
-				:path="modelValue ? mdiToggleSwitch : mdiToggleSwitchOff"
-				:class="$style.formBoxSwitch__icon"
-				:size="34 /* --default-clickable-area */"
-				inline />
+			<NcIconToggleSwitch :checked="modelValue" inline />
 		</template>
 	</NcFormBoxItem>
 </template>
@@ -103,14 +98,6 @@ input.formBoxSwitch__input {
 	height: auto;
 	cursor: inherit;
 }
-
-.formBoxSwitch__icon {
-	color: var(--color-text-maxcontrast);
-}
-
-input:checked + .formBoxSwitch__icon {
-	color: var(--color-primary-element);
-}
 </style>
 
 <docs>
diff --git a/src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue b/src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue
new file mode 100644
index 0000000000..ddd0cf8f43
--- /dev/null
+++ b/src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue
@@ -0,0 +1,66 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts">
+const svg = `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 12">
+	<path d="M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z" />
+	<circle
+		cy="6"
+		r="3"
+		fill="var(--color-main-background)" />
+</svg>`
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+
+const {
+	checked,
+	size = 34,
+	inline = false,
+} = defineProps<{
+	/** Whether the toggle switch is checked */
+	checked: boolean
+	/** Size of the icon */
+	size?: number
+	/** NcIconSvgWrapper's inline prop */
+	inline?: boolean
+}>()
+
+const color = computed(() => checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')
+const cx = computed(() => checked ? 'calc(17 / 24 * 100%)' : 'calc(7 / 24 * 100%)')
+</script>
+
+<template>
+	<NcIconSvgWrapper
+		:class="$style.iconToggleSwitch"
+		:svg
+		:size
+		:inline />
+</template>
+
+<style module lang="scss">
+.iconToggleSwitch {
+	color: v-bind(color);
+	transition: color var(--animation-quick) ease;
+
+	svg {
+		/* Unlike other icons, this icon is not a square */
+		height: auto !important;
+	}
+
+	circle {
+		cx: v-bind(cx);
+		transition: cx var(--animation-quick) ease;
+	}
+}
+</style>
+
+<docs>
+Private component
+</docs>
diff --git a/styleguide.config.cjs b/styleguide.config.cjs
index 9216fc4ec9..040a2177cb 100644
--- a/styleguide.config.cjs
+++ b/styleguide.config.cjs
@@ -206,6 +206,7 @@ module.exports = async () => {
 					'src/components/NcTextArea/*.vue',
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
 					'src/components/NcFormBox/NcFormBoxItem.vue',
+					'src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue',
 				],
 				sections: [
 					{