From 7057225f5a0bda7c9963bac1356f0c1dbcc5c920 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 14:08:55 -0400
Subject: [PATCH 1/3] refactor(many): remove phosphor icon usage

---
 core/src/components/accordion/accordion.tsx   | 14 +----
 .../components/back-button/back-button.tsx    | 12 +----
 core/src/components/breadcrumb/breadcrumb.tsx | 28 +---------
 core/src/components/datetime/datetime.tsx     | 52 +++----------------
 core/src/components/fab-button/fab-button.tsx | 14 +----
 .../input-password-toggle.tsx                 | 30 ++---------
 core/src/components/input/input.tsx           | 12 +----
 core/src/components/item/item.tsx             | 16 +-----
 .../components/menu-button/menu-button.tsx    | 12 +----
 .../refresher-content/refresher-content.tsx   |  4 +-
 core/src/components/reorder/reorder.tsx       | 12 +----
 core/src/components/searchbar/searchbar.tsx   | 38 ++------------
 .../components/select-modal/select-modal.tsx  |  9 +---
 core/src/components/select/select.tsx         | 23 ++------
 core/src/components/toggle/toggle.tsx         | 27 ++--------
 15 files changed, 38 insertions(+), 265 deletions(-)

diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index dcfa11029ac..e313ca53123 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
@@ -248,19 +247,8 @@ export class Accordion implements ComponentInterface {
       return this.toggleIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronDown,
-      ionic: caretDownRegular,
-      md: chevronDown,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured accordion toggle icon or the default icon
-    return config.get('accordionToggleIcon', defaultIcon);
+    return config.get('accordionToggleIcon', chevronDown);
   }
 
   private slotToggleIcon = () => {
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 4c4d738fb7e..9bd47775b67 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -1,4 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
@@ -86,16 +85,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
       return this.icon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronBack,
-      ionic: caretLeftRegular,
-      md: arrowBackSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
 
     // Return the configured back button icon or the default icon
     return config.get('backButtonIcon', defaultIcon);
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index 248b2e3f22c..cdbea932472 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -1,5 +1,3 @@
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
-import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
@@ -136,35 +134,13 @@ export class Breadcrumb implements ComponentInterface {
   }
 
   get breadcrumbCollapsedIcon() {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: ellipsisHorizontal,
-      ionic: dotsThreeRegular,
-      md: ellipsisHorizontal,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured breadcrumb collapsed icon or the default icon
-    return config.get('breadcrumbCollapsedIcon', defaultIcon);
+    return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
   }
 
   get breadcrumbSeparatorIcon() {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronForwardOutline,
-      ionic: caretRightRegular,
-      md: chevronForwardOutline,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured breadcrumb separator icon or the default icon
-    return config.get('breadcrumbSeparatorIcon', defaultIcon);
+    return config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
   }
 
   private isClickable(): boolean {
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e9475e19b8d..c37f7da0733 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,5 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 import { startFocusVisible } from '@utils/focus-visible';
@@ -2753,19 +2751,8 @@ export class Datetime implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get datetimeNextIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: caretRightRegular,
-      md: chevronForward,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured datetime next icon or the default icon
-    return config.get('datetimeNextIcon', defaultIcon);
+    return config.get('datetimeNextIcon', chevronForward);
   }
 
   /**
@@ -2774,19 +2761,8 @@ export class Datetime implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get datetimePreviousIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronBack,
-      ionic: caretLeftRegular,
-      md: chevronBack,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured datetime previous icon or the default icon
-    return config.get('datetimePreviousIcon', defaultIcon);
+    return config.get('datetimePreviousIcon', chevronBack);
   }
 
   /**
@@ -2795,17 +2771,9 @@ export class Datetime implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get datetimeCollapsedIcon(): string | undefined {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: undefined,
-      md: caretDownSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronForward : caretDownSharp;
 
     // Return the configured datetime show month and year icon or the default icon
     return config.get('datetimeCollapsedIcon', defaultIcon);
@@ -2817,17 +2785,9 @@ export class Datetime implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get datetimeExpandedIcon(): string | undefined {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-
-    const defaultIcons = {
-      ios: chevronDown,
-      ionic: undefined,
-      md: caretUpSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronDown : caretUpSharp;
 
     // Return the configured datetime hide month and year icon or the default icon
     return config.get('datetimeExpandedIcon', defaultIcon);
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 65c6500bb38..4bf394d280f 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -244,19 +243,8 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
       return this.closeIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: close,
-      ionic: xRegular,
-      md: close,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured fab button close icon or the default icon
-    return config.get('fabButtonCloseIcon', defaultIcon);
+    return config.get('fabButtonCloseIcon', close);
   }
 
   render() {
diff --git a/core/src/components/input-password-toggle/input-password-toggle.tsx b/core/src/components/input-password-toggle/input-password-toggle.tsx
index 2cf3678d2a4..8d1f3ad7f38 100644
--- a/core/src/components/input-password-toggle/input-password-toggle.tsx
+++ b/core/src/components/input-password-toggle/input-password-toggle.tsx
@@ -1,5 +1,3 @@
-import eyeSlashRegular from '@phosphor-icons/core/assets/regular/eye-slash.svg';
-import eyeRegular from '@phosphor-icons/core/assets/regular/eye.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, Watch } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
@@ -7,7 +5,7 @@ import { createColorClasses } from '@utils/theme';
 import { eyeOff, eye } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, TextFieldTypes } from '../../interface';
 
 /**
@@ -115,19 +113,8 @@ export class InputPasswordToggle implements ComponentInterface {
       return this.hideIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: eyeOff,
-      ionic: eyeSlashRegular,
-      md: eyeOff,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured input password hide icon or the default icon
-    return config.get('inputPasswordHideIcon', defaultIcon);
+    return config.get('inputPasswordHideIcon', eyeOff);
   }
 
   get inputPasswordShowIcon() {
@@ -136,19 +123,8 @@ export class InputPasswordToggle implements ComponentInterface {
       return this.showIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: eye,
-      ionic: eyeRegular,
-      md: eye,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured input password show icon or the default icon
-    return config.get('inputPasswordShowIcon', defaultIcon);
+    return config.get('inputPasswordShowIcon', eye);
   }
 
   render() {
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 672a2bf414a..b79e5cc0d96 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import {
   Build,
@@ -957,16 +956,9 @@ export class Input implements ComponentInterface {
       return this.clearInputIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: closeCircle,
-      ionic: xRegular,
-      md: closeSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
 
     // Return the configured input clear icon or the default icon
     return config.get('inputClearIcon', defaultIcon);
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index bcf9c56d447..c8b06cd6b3d 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,4 +1,3 @@
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -363,19 +362,8 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       return this.detailIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: caretRightRegular,
-      md: chevronForward,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured item detail icon or the default icon
-    return config.get('itemDetailIcon', defaultIcon);
+    return config.get('itemDetailIcon', chevronForward);
   }
 
   /**
@@ -383,7 +371,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
    * the icon is a variation of chevron.
    */
   get shouldFlipIcon() {
-    return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+    return this.itemDetailIcon === chevronForward;
   }
 
   render() {
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 61e683c1268..ac80325a17f 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,4 +1,3 @@
-import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
@@ -78,16 +77,9 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
   }
 
   get menuIcon() {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: menuOutline,
-      ionic: listRegular,
-      md: menuSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
 
     // Return the configured menu icon or the default icon
     return config.get('menuIcon', defaultIcon);
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 85f7ff2db18..4493da6d09e 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -1,4 +1,3 @@
-import caretLeftFill from '@phosphor-icons/core/assets/fill/caret-left-fill.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
@@ -117,7 +116,6 @@ export class RefresherContent implements ComponentInterface {
     const pullingIcon = this.pullingIcon;
     const hasSpinner = pullingIcon != null && (SPINNERS[pullingIcon] as any) !== undefined;
     const theme = getIonTheme(this);
-    const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
 
     return (
       <Host
@@ -132,7 +130,7 @@ export class RefresherContent implements ComponentInterface {
                 <ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
                 {(theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (
                   <div class="arrow-container">
-                    <ion-icon icon={arrowIcon} aria-hidden="true"></ion-icon>
+                    <ion-icon icon={caretBackSharp} aria-hidden="true"></ion-icon>
                   </div>
                 )}
               </div>
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index e816b66745f..d18bdc9f226 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -1,4 +1,3 @@
-import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, h } from '@stencil/core';
 import { reorderThreeOutline, reorderTwoSharp } from 'ionicons/icons';
@@ -43,16 +42,9 @@ export class Reorder implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get reorderHandleIcon(): string {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: reorderThreeOutline,
-      ionic: listRegular,
-      md: reorderTwoSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
 
     // Return the configured reorder handle icon or the default icon
     return config.get('reorderHandleIcon', defaultIcon);
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 790e9a0845e..65db2fd7594 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -1,6 +1,3 @@
-import arrowLeftRegular from '@phosphor-icons/core/assets/regular/arrow-left.svg';
-import magnifyingGlassRegular from '@phosphor-icons/core/assets/regular/magnifying-glass.svg';
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import { createClearButtonPressController } from '@utils/forms';
@@ -738,16 +735,9 @@ export class Searchbar implements ComponentInterface {
       return this.clearIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: closeCircle,
-      ionic: xRegular,
-      md: closeSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
 
     // Return the configured searchbar clear icon or the default icon
     return config.get('searchbarClearIcon', defaultIcon);
@@ -766,16 +756,9 @@ export class Searchbar implements ComponentInterface {
       return this.searchIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: searchOutline,
-      ionic: magnifyingGlassRegular,
-      md: searchSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? searchOutline : searchSharp;
 
     // Return the configured searchbar search icon or the default icon
     return config.get('searchbarSearchIcon', defaultIcon);
@@ -793,19 +776,8 @@ export class Searchbar implements ComponentInterface {
       return this.cancelButtonIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: arrowBackSharp,
-      ionic: arrowLeftRegular,
-      md: arrowBackSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured searchbar cancel icon, the back button icon or the default icon
-    return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
+    return config.get('searchbarCancelIcon', config.get('backButtonIcon', arrowBackSharp));
   }
 
   render() {
diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx
index baafc792e83..cd6fe3a78e6 100644
--- a/core/src/components/select-modal/select-modal.tsx
+++ b/core/src/components/select-modal/select-modal.tsx
@@ -1,5 +1,4 @@
 import { getIonMode, getIonTheme } from '@global/ionic-global';
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core';
 import { getOverlayLabelJustify, getOverlayLabelPlacement } from '@utils/overlay-control-label';
@@ -8,7 +7,6 @@ import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap, hostContext } from '@utils/theme';
 import { closeOutline, closeSharp } from 'ionicons/icons';
 
-import type { Theme } from '../../interface';
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
 import type { SelectOverlayOption } from '../select/select-interface';
@@ -99,12 +97,7 @@ export class SelectModal implements ComponentInterface {
 
   private get cancelButtonIcon(): string {
     const theme = getIonTheme(this);
-    const icons: Record<Theme, string> = {
-      ios: closeOutline,
-      md: closeSharp,
-      ionic: xRegular,
-    };
-    return icons[theme];
+    return theme === 'ios' ? closeOutline : closeSharp;
   }
 
   private getModalContextClasses() {
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 3aadf02d29c..2d4444c5721 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
@@ -1304,16 +1303,9 @@ export class Select implements ComponentInterface {
       return this.toggleIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronExpand,
-      ionic: caretDownRegular,
-      md: caretDownSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
 
     // Return the configured select expanded icon or the default icon
     return config.get('selectExpandedIcon', defaultIcon);
@@ -1331,16 +1323,9 @@ export class Select implements ComponentInterface {
       return this.toggleIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronExpand,
-      ionic: caretDownRegular,
-      md: caretDownSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
 
     return config.get('selectCollapsedIcon', defaultIcon);
   }
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 28122cb2e24..2e34f244a5e 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,5 +1,3 @@
-import checkRegular from '@phosphor-icons/core/assets/regular/check.svg';
-import minusRegular from '@phosphor-icons/core/assets/regular/minus.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
@@ -367,19 +365,9 @@ export class Toggle implements ComponentInterface {
   };
 
   get toggleDefaultCheckedIcon(): string {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: removeOutline,
-      ionic: checkRegular,
-      md: checkmarkOutline,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
-    // Return the default icon
-    return defaultIcon;
+    return theme === 'ios' ? removeOutline : checkmarkOutline;
   }
 
   /**
@@ -397,16 +385,9 @@ export class Toggle implements ComponentInterface {
    * If no icon is set in the config, use the default icon.
    */
   get toggleUncheckedIcon(): string {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: ellipseOutline,
-      ionic: minusRegular,
-      md: removeOutline,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? ellipseOutline : removeOutline;
 
     // Return the configured toggle unchecked icon or the default icon
     return config.get('toggleUncheckedIcon', defaultIcon);

From 69200e89b12f419259df693a9201c2903da92f57 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 14:11:19 -0400
Subject: [PATCH 2/3] chore(deps): remove @phosphor-icons/core

---
 core/package-lock.json | 7 -------
 core/package.json      | 1 -
 2 files changed, 8 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 645beeebcd8..894740921da 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -9,7 +9,6 @@
       "version": "8.8.19",
       "license": "MIT",
       "dependencies": {
-        "@phosphor-icons/core": "^2.1.1",
         "@stencil/core": "4.43.5",
         "ionicons": "^8.1.0",
         "tslib": "^2.1.0"
@@ -1889,12 +1888,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@phosphor-icons/core": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
-      "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==",
-      "license": "MIT"
-    },
     "node_modules/@playwright/test": {
       "version": "1.62.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
diff --git a/core/package.json b/core/package.json
index 02fbc1cf70d..a05d7160fba 100644
--- a/core/package.json
+++ b/core/package.json
@@ -34,7 +34,6 @@
     "loader/"
   ],
   "dependencies": {
-    "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "4.43.5",
     "ionicons": "^8.1.0",
     "tslib": "^2.1.0"

From 4023d2a9c05b108a4ed51c06763c63347e05b7ed Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 14:13:42 -0400
Subject: [PATCH 3/3] chore: remove old svgTransform for Jest

---
 core/stencil.config.ts |  3 +--
 core/svgTransform.js   | 13 -------------
 2 files changed, 1 insertion(+), 15 deletions(-)
 delete mode 100644 core/svgTransform.js

diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 0a015720a82..e458aecb5be 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -254,8 +254,7 @@ export const config: Config = {
   testing: {
     moduleNameMapper: {
       "@utils/test": ["<rootDir>/src/utils/test/utils"],
-      "@utils/logging": ["<rootDir>/src/utils/logging"],
-      "^.+\\.svg": "<rootDir>/svgTransform.js"
+      "@utils/logging": ["<rootDir>/src/utils/logging"]
     },
     setupFilesAfterEnv: ['./setupJest.js']
   },
diff --git a/core/svgTransform.js b/core/svgTransform.js
deleted file mode 100644
index 8ced84279ef..00000000000
--- a/core/svgTransform.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// This transform is required for svg files to work with Jest
-// See https://stackoverflow.com/q/46791263/3802466
-module.exports = {
-  process() {
-    return {
-      code: `module.exports = {};`,
-    };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return "svgTransform";
-  },
-};