diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts
index e37388c226a..f0fb38f3026 100644
--- a/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -64,14 +64,21 @@ export const flipPlacements_TestOnly = (): string => html`
   </script>
 `;
 
-export const laoNumberingSystem_TestOnly = (): string => html`
+export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
+      open
       value="1/1/1"
       lang="zh-CN"
       numbering-system="laoo"
-    ></calcite-input-date-picker
-  </div>`;
+      scale="l"
+      start="2020-12-12"
+      end="2020-12-16"
+      range=""
+      layout="horizontal"
+    ></calcite-input-date-picker>
+  </div>
+`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
index e9ab4024559..3e4bdd5a46f 100644
--- a/src/components/input-date-picker/input-date-picker.tsx
+++ b/src/components/input-date-picker/input-date-picker.tsx
@@ -519,12 +519,16 @@ export class InputDatePicker
 
             {this.range && this.layout === "horizontal" && (
               <div class="horizontal-arrow-container">
-                <calcite-icon flipRtl={true} icon="arrow-right" scale="s" />
+                <calcite-icon
+                  flipRtl={true}
+                  icon="arrow-right"
+                  scale={this.scale === "l" ? "m" : "s"}
+                />
               </div>
             )}
             {this.range && this.layout === "vertical" && this.scale !== "s" && (
               <div class="vertical-arrow-container">
-                <calcite-icon icon="arrow-down" scale="s" />
+                <calcite-icon icon="arrow-down" scale={this.scale === "l" ? "m" : "s"} />
               </div>
             )}
             {this.range && (
diff --git a/src/components/input-number/input-number.scss b/src/components/input-number/input-number.scss
index ef29307c4b9..35418a3532e 100755
--- a/src/components/input-number/input-number.scss
+++ b/src/components/input-number/input-number.scss
@@ -146,7 +146,7 @@
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader
diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts
index 145b7fcec16..09f368f0e99 100644
--- a/src/components/input-number/input-number.stories.ts
+++ b/src/components/input-number/input-number.stories.ts
@@ -116,8 +116,39 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystem_TestOnly = (): string =>
-  html`<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input-number>`;
+export const hebrewNumberingSystemAndMediumIconForLargeInputStyling_TestOnly = (): string =>
+  html`
+    <calcite-input-number
+      number-button-type="vertical"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+    ></calcite-input-number
+    ><calcite-input-number
+      number-button-type="vertical"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+      icon="pen"
+    ></calcite-input-number>
+    <calcite-input-number
+      number-button-type="horizontal"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+    ></calcite-input-number
+    ><calcite-input-number
+      number-button-type="horizontal"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+      icon="pen"
+    ></calcite-input-number>
+  `;
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx
index 4c8d2319a09..ab833301873 100644
--- a/src/components/input-number/input-number.tsx
+++ b/src/components/input-number/input-number.tsx
@@ -877,7 +877,7 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
@@ -885,7 +885,7 @@ export class InputNumber
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -906,7 +906,7 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-up" scale="s" />
+        <calcite-icon icon="chevron-up" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -925,7 +925,7 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-down" scale="s" />
+        <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
diff --git a/src/components/input-text/input-text.scss b/src/components/input-text/input-text.scss
index b5d213a6584..0d0d2f4a13d 100755
--- a/src/components/input-text/input-text.scss
+++ b/src/components/input-text/input-text.scss
@@ -143,7 +143,7 @@ input:focus {
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader
diff --git a/src/components/input-text/input-text.stories.ts b/src/components/input-text/input-text.stories.ts
index dd36fdf314d..6c86a41429b 100644
--- a/src/components/input-text/input-text.stories.ts
+++ b/src/components/input-text/input-text.stories.ts
@@ -95,3 +95,17 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const mediumIconForLargeScaleStyling_TestOnly = (): string => html`
+  <calcite-label scale="l">
+    Input Label
+    <calcite-input-text placeholder="Placeholder" scale="l"></calcite-input-text>
+    <calcite-input-text
+      placeholder="Placeholder"
+      scale="l"
+      icon="search"
+      clearable
+      value="sample input to show x"
+    ></calcite-input-text>
+  </calcite-label>
+`;
diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx
index 813ca2c12d2..d1d95650bc4 100644
--- a/src/components/input-text/input-text.tsx
+++ b/src/components/input-text/input-text.tsx
@@ -592,7 +592,7 @@ export class InputText
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
@@ -600,7 +600,7 @@ export class InputText
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
     const prefixText = <div class={CSS.prefix}>{this.prefixText}</div>;
diff --git a/src/components/input-time-picker/input-time-picker.stories.ts b/src/components/input-time-picker/input-time-picker.stories.ts
index d29bdc6dfbe..e13cca4d33d 100644
--- a/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/src/components/input-time-picker/input-time-picker.stories.ts
@@ -26,7 +26,8 @@ export const simple = (): string => html`
   </calcite-input-time-picker>
 `;
 
-export const disabled_TestOnly = (): string => html`<calcite-input-time-picker disabled></calcite-input-time-picker>`;
+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 darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 2dbc725ea88..350db793e8b 100755
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -199,7 +199,7 @@
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 0048733a2fe..668f06acc15 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -1019,7 +1019,7 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
@@ -1027,7 +1027,7 @@ export class Input
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -1048,7 +1048,7 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-up" scale="s" />
+        <calcite-icon icon="chevron-up" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -1067,7 +1067,7 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-down" scale="s" />
+        <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -1153,7 +1153,7 @@ export class Input
             />,
             this.isTextarea ? (
               <div class={CSS.resizeIconWrapper}>
-                <calcite-icon icon="chevron-down" scale="s" />
+                <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
               </div>
             ) : null
           ]
diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts
new file mode 100644
index 00000000000..7f77684e88e
--- /dev/null
+++ b/src/components/tab-title/resources.ts
@@ -0,0 +1,8 @@
+export const CSS = {
+  container: "container",
+  containerHasText: "container--has-text",
+  iconEnd: "icon-end",
+  iconStart: "icon-start",
+  iconPresent: "icon-present",
+  titleIcon: "calcite-tab-title--icon"
+};
diff --git a/src/components/tab-title/tab-title.e2e.ts b/src/components/tab-title/tab-title.e2e.ts
index 8642cf84f9f..0fcccd1f224 100644
--- a/src/components/tab-title/tab-title.e2e.ts
+++ b/src/components/tab-title/tab-title.e2e.ts
@@ -1,8 +1,11 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-tab-title", () => {
   const tabTitleHtml = "<calcite-tab-title></calcite-tab-title>";
+  const iconStartHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconStart}`;
+  const iconEndHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconEnd}`;
 
   it("renders", async () => renders(tabTitleHtml, { display: "block" }));
 
@@ -14,8 +17,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-start='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).not.toBeNull();
     expect(iconEnd).toBeNull();
@@ -25,8 +28,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-end='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).toBeNull();
     expect(iconEnd).not.toBeNull();
@@ -36,8 +39,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-start='plus' icon-end='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).not.toBeNull();
     expect(iconEnd).not.toBeNull();
diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
index edc4990f1d1..9c6c6b6c62b 100644
--- a/src/components/tab-title/tab-title.scss
+++ b/src/components/tab-title/tab-title.scss
@@ -59,7 +59,7 @@
 :host([scale="l"]) {
   margin-inline-end: 1.5rem;
   .container {
-    @apply text-0h py-3;
+    @apply text-0h py-2.5;
   }
 }
 
@@ -77,8 +77,7 @@
     justify-center
     truncate
     border-b-2
-    px-0
-    py-2;
+    px-0;
   border-block-end-style: solid;
 }
 
@@ -169,6 +168,9 @@
   .container {
     @apply px-4;
   }
+  .icon-present {
+    padding-block: 11px;
+  }
 }
 
 @media (forced-colors: active) {
diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index 5c7f9d028a1..b3c76dbfb47 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -19,6 +19,7 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac
 import { createObserver } from "../../utils/observers";
 import { FlipContext, Scale } from "../interfaces";
 import { TabChangeEventDetail } from "../tab/interfaces";
+import { CSS } from "./resources";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -148,19 +149,19 @@ export class TabTitle implements InteractiveComponent {
 
     const iconStartEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-start"
+        class={{ [CSS.titleIcon]: true, [CSS.iconStart]: true }}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
     const iconEndEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-end"
+        class={{ [CSS.titleIcon]: true, [CSS.iconEnd]: true }}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -175,7 +176,8 @@ export class TabTitle implements InteractiveComponent {
         <div
           class={{
             container: true,
-            "container--has-text": this.hasText
+            [CSS.iconPresent]: this.iconStart || this.iconEnd ? true : null,
+            [CSS.containerHasText]: this.hasText
           }}
           ref={(el) => this.resizeObserver?.observe(el)}
         >
diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
index 4087e80de22..fd3b3980f51 100644
--- a/src/components/tab/tab.scss
+++ b/src/components/tab/tab.scss
@@ -27,5 +27,6 @@ section,
 }
 
 :host([scale="l"]) {
-  @apply text-0h py-3;
+  @apply text-0h;
+  padding-block: 13px;
 }
diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
index 5f52d38c1bc..6c94558c677 100644
--- a/src/components/tabs/tabs.stories.ts
+++ b/src/components/tabs/tabs.stories.ts
@@ -150,39 +150,19 @@ export const justTabNav = (): string => html`
   </calcite-tab-nav>
 `;
 
-export const disabledTabs_TestOnly = (): string => {
-  const disabledLabel = "Disabled Tabs";
-  const disabledValuesObj = {
-    Tab1: "tab1",
-    Tab2: "tab2",
-    Tab3: "tab3"
-  };
-  const defaultValue = "tab2";
-  const optionsKnobSelections = optionsKnob(
-    disabledLabel,
-    disabledValuesObj,
-    defaultValue,
-    { display: "multi-select" },
-    "DISABLED-TABS"
-  );
-  const tab1disabled = optionsKnobSelections.includes(disabledValuesObj.Tab1);
-  const tab2disabled = optionsKnobSelections.includes(disabledValuesObj.Tab2);
-  const tab3disabled = optionsKnobSelections.includes(disabledValuesObj.Tab3);
-
-  return `
-      <calcite-tabs>
-        <calcite-tab-nav slot="title-group">
-          <calcite-tab-title selected ${tab1disabled ? "disabled" : ""}>Tab 1 Title</calcite-tab-title>
-          <calcite-tab-title ${tab2disabled ? "disabled" : ""}>Tab 2 Title</calcite-tab-title>
-          <calcite-tab-title ${tab3disabled ? "disabled" : ""}>Tab 3 Title</calcite-tab-title>
-        </calcite-tab-nav>
+export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html`
+  <calcite-tabs scale="l">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title disabled icon-start="arrow-left">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title disabled icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+    </calcite-tab-nav>
 
-        <calcite-tab selected><p>Tab 1 Content</p></calcite-tab>
-        <calcite-tab><p>Tab 2 Content</p></calcite-tab>
-        <calcite-tab><p>Tab 3 Content</p></calcite-tab>
-      </calcite-tabs>
-    `;
-};
+    <calcite-tab><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
 
 export const TabChilrenWithPercentageHeights = (): string => html`
   <calcite-tabs style="height: 250px;">