diff --git a/switch/internal/_icon.scss b/switch/internal/_icon.scss
index 15dd0c4c5f..b97083aae2 100644
--- a/switch/internal/_icon.scss
+++ b/switch/internal/_icon.scss
@@ -25,6 +25,10 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
       position: absolute;
       inset: 0;
       margin: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      fill: currentColor;
 
       transition: fill 67ms linear, opacity 33ms linear,
         transform 167ms $_easing-standard;
@@ -48,46 +52,46 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     .icon--off {
       width: var(--_icon-size);
       height: var(--_icon-size);
-      fill: var(--_icon-color);
+      color: var(--_icon-color);
     }
 
     .unselected:hover .icon--off {
-      fill: var(--_hover-icon-color);
+      color: var(--_hover-icon-color);
     }
 
     .unselected:focus-within .icon--off {
-      fill: var(--_focus-icon-color);
+      color: var(--_focus-icon-color);
     }
-
+ 
     .unselected:active .icon--off {
-      fill: var(--_pressed-icon-color);
+      color: var(--_pressed-icon-color);
     }
 
     .unselected.disabled .icon--off {
-      fill: var(--_disabled-icon-color);
+      color: var(--_disabled-icon-color);
       opacity: var(--_disabled-icon-opacity);
     }
 
     .icon--on {
       width: var(--_selected-icon-size);
       height: var(--_selected-icon-size);
-      fill: var(--_selected-icon-color);
+      color: var(--_selected-icon-color);
     }
 
     .selected:hover .icon--on {
-      fill: var(--_selected-hover-icon-color);
+      color: var(--_selected-hover-icon-color);
     }
 
     .selected:focus-within .icon--on {
-      fill: var(--_selected-focus-icon-color);
+      color: var(--_selected-focus-icon-color);
     }
 
     .selected:active .icon--on {
-      fill: var(--_selected-pressed-icon-color);
+      color: var(--_selected-pressed-icon-color);
     }
 
     .selected.disabled .icon--on {
-      fill: var(--_disabled-selected-icon-color);
+      color: var(--_disabled-selected-icon-color);
       opacity: var(--_disabled-selected-icon-opacity);
     }
   }
diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
index 426bc29c9b..1036b5dfca 100644
--- a/switch/internal/switch.ts
+++ b/switch/internal/switch.ts
@@ -159,10 +159,12 @@ export class Switch extends switchBaseClass {
    */
   private renderOnIcon() {
     return html`
-      <svg class="icon icon--on" viewBox="0 0 24 24">
-        <path
-          d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
-      </svg>
+      <slot class="icon icon--on" name="on-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
+        </svg>
+      </slot>
     `;
   }
 
@@ -171,10 +173,12 @@ export class Switch extends switchBaseClass {
    */
   private renderOffIcon() {
     return html`
-      <svg class="icon icon--off" viewBox="0 0 24 24">
-        <path
-          d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
-      </svg>
+      <slot class="icon icon--off" name="off-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
+        </svg>
+      </slot>
     `;
   }