diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 2f1d25cb3a9..5da6a06d1b1 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -35,9 +35,7 @@
 }
 
 .toggle-icon {
-  @apply absolute flex
-  w-4 cursor-pointer
-  items-center;
+  @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 77b1b739e23..b4529060481 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -94,6 +94,13 @@ export const invalidStatus_TestOnly = (): string => html`
   </div>
 `;
 
+export const scales_TestOnly = (): string =>
+  html`
+    <calcite-input-date-picker scale="s" icon value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="m" icon value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="l" icon value="2020-12-12"></calcite-input-date-picker>
+  `;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 39f7a3c8432..1db218fc2f9 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -660,7 +660,10 @@ export class InputDatePicker
   renderToggleIcon(open: boolean): VNode {
     return (
       <span class={CSS.toggleIcon}>
-        <calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
+        <calcite-icon
+          icon={open ? "chevron-up" : "chevron-down"}
+          scale={getIconScale(this.scale)}
+        />
       </span>
     );
   }
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index 0bfd37fc4c1..0fd570a7e27 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -23,9 +23,7 @@
 }
 
 .toggle-icon {
-  @apply absolute flex
-  w-4 cursor-pointer
-  items-center;
+  @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
index 7b02d22bdee..00c55e1308c 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -42,6 +42,13 @@ export const milliseconds_TestOnly = (): string => html`
 export const disabled_TestOnly = (): string =>
   html`<calcite-input-time-picker disabled scale="l" icon step="1" value="01:02"></calcite-input-time-picker>`;
 
+export const scales_TestOnly = (): string =>
+  html`
+    <calcite-input-time-picker scale="s" icon value="01:02"></calcite-input-time-picker>
+    <calcite-input-time-picker scale="m" icon value="01:02"></calcite-input-time-picker>
+    <calcite-input-time-picker scale="l" icon value="01:02"></calcite-input-time-picker>
+  `;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker class="calcite-mode-dark" value="22:37" step="1"> </calcite-input-time-picker>
 `;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 558ab833a51..cac89a9cd6f 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -72,6 +72,7 @@ import updateLocale from "dayjs/esm/plugin/updateLocale";
 import { getSupportedLocale } from "../../utils/locale";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { decimalPlaces } from "../../utils/math";
+import { getIconScale } from "../../utils/component";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayjsLocaleToLocaleConfigImport = new Map([
@@ -1026,7 +1027,10 @@ export class InputTimePicker
   renderToggleIcon(open: boolean): VNode {
     return (
       <span class={CSS.toggleIcon}>
-        <calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
+        <calcite-icon
+          icon={open ? "chevron-up" : "chevron-down"}
+          scale={getIconScale(this.scale)}
+        />
       </span>
     );
   }