diff --git a/iconbutton/_filled-icon-button.scss b/iconbutton/_filled-icon-button.scss
index 4510c0ef8..ea9674015 100644
--- a/iconbutton/_filled-icon-button.scss
+++ b/iconbutton/_filled-icon-button.scss
@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-icon-button-theme' show
-  theme;
+@forward './lib/filled-icon-button' show theme;
diff --git a/iconbutton/_filled-tonal-icon-button.scss b/iconbutton/_filled-tonal-icon-button.scss
index c71ed742c..5aee1647e 100644
--- a/iconbutton/_filled-tonal-icon-button.scss
+++ b/iconbutton/_filled-tonal-icon-button.scss
@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-tonal-icon-button-theme' show
-  theme;
+@forward './lib/filled-tonal-icon-button' show theme;
diff --git a/iconbutton/_outlined-icon-button.scss b/iconbutton/_outlined-icon-button.scss
index b5f9d5379..87c2bd184 100644
--- a/iconbutton/_outlined-icon-button.scss
+++ b/iconbutton/_outlined-icon-button.scss
@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-icon-button-theme' show
-  theme;
+@forward './lib/outlined-icon-button' show theme;
diff --git a/iconbutton/_standard-icon-button.scss b/iconbutton/_standard-icon-button.scss
index 0ca6a845c..cd419c4d7 100644
--- a/iconbutton/_standard-icon-button.scss
+++ b/iconbutton/_standard-icon-button.scss
@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/standard-icon-button-theme' show
-  theme;
+@forward './lib/standard-icon-button' show theme;
diff --git a/iconbutton/filled-icon-button-toggle.ts b/iconbutton/filled-icon-button-toggle.ts
index cb9d45897..6bee75201 100644
--- a/iconbutton/filled-icon-button-toggle.ts
+++ b/iconbutton/filled-icon-button-toggle.ts
@@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-styles.css.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/filled-icon-button.ts b/iconbutton/filled-icon-button.ts
index 606c52011..abbc78ccf 100644
--- a/iconbutton/filled-icon-button.ts
+++ b/iconbutton/filled-icon-button.ts
@@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-styles.css.js';
 import {IconButton} from './lib/icon-button.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/filled-link-icon-button.ts b/iconbutton/filled-link-icon-button.ts
index 4a62680ce..10ec8f040 100644
--- a/iconbutton/filled-link-icon-button.ts
+++ b/iconbutton/filled-link-icon-button.ts
@@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-styles.css.js';
 import {LinkIconButton} from './lib/link-icon-button.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/filled-tonal-icon-button-toggle.ts b/iconbutton/filled-tonal-icon-button-toggle.ts
index e18342b69..c0a6bd492 100644
--- a/iconbutton/filled-tonal-icon-button-toggle.ts
+++ b/iconbutton/filled-tonal-icon-button-toggle.ts
@@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-tonal-styles.css.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/filled-tonal-icon-button.ts b/iconbutton/filled-tonal-icon-button.ts
index aba2acdd5..7a012d1db 100644
--- a/iconbutton/filled-tonal-icon-button.ts
+++ b/iconbutton/filled-tonal-icon-button.ts
@@ -11,7 +11,7 @@ import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-tonal-styles.css.js';
 import {IconButton} from './lib/icon-button.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/filled-tonal-link-icon-button.ts b/iconbutton/filled-tonal-link-icon-button.ts
index 5b11a1996..10a6d9eb1 100644
--- a/iconbutton/filled-tonal-link-icon-button.ts
+++ b/iconbutton/filled-tonal-link-icon-button.ts
@@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {styles} from './lib/filled-tonal-styles.css.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/lib/_filled-icon-button-theme.scss b/iconbutton/lib/_filled-icon-button-theme.scss
deleted file mode 100644
index 14bc1ab7c..000000000
--- a/iconbutton/lib/_filled-icon-button-theme.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-
-@use '../../ripple/ripple-theme';
-@use '../../sass/color';
-@use '../../sass/resolvers';
-@use '../../sass/theme';
-@use '../../tokens';
-
-@use './icon-button-theme';
-
-$_custom-property-prefix: 'filled-icon-button';
-
-$light-theme: tokens.md-comp-filled-icon-button-values();
-$dark-theme: tokens.md-comp-filled-icon-button-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors($theme, $variant: 'filled');
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors($theme, $variant: 'filled');
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  background-color: var(--_container-color);
-  color: var(--_icon-color);
-
-  &:hover {
-    color: var(--_hover-icon-color);
-  }
-
-  &:focus {
-    color: var(--_focus-icon-color);
-  }
-
-  &:active {
-    color: var(--_pressed-icon-color);
-  }
-
-  &:disabled {
-    background-color: var(--_disabled-container-color);
-    color: var(--_disabled-icon-color);
-  }
-
-  @include ripple-theme.theme(
-    (
-      focus-state-layer-color: var(--_focus-state-layer-color),
-      focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-      hover-state-layer-color: var(--_hover-state-layer-color),
-      hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-      pressed-state-layer-color: var(--_pressed-state-layer-color),
-      pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-    )
-  );
-
-  &.md3-icon-button--toggle-filled {
-    &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
-      color: var(--_toggle-unselected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
-      )
-    );
-  }
-
-  &.md3-icon-button--on {
-    &:not(:disabled) {
-      background-color: var(--_selected-container-color);
-      color: var(--_toggle-selected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-selected-pressed-icon-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
-      )
-    );
-  }
-}
diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss
index 8098470a7..d02ab2d7d 100644
--- a/iconbutton/lib/_filled-icon-button.scss
+++ b/iconbutton/lib/_filled-icon-button.scss
@@ -3,6 +3,127 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally blank for future-proofing.
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../ripple/ripple-theme';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'filled-icon-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-filled-icon-button-values(),
+    $tokens
+  );
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-icon-button-values();
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .md3-icon-button {
+    background-color: var(--_container-color);
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:disabled {
+      background-color: var(--_disabled-container-color);
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        hover-state-layer-color: var(--_hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-icon-button--toggle-filled {
+    &:not(:disabled) {
+      background-color: var(--_unselected-container-color);
+      color: var(--_toggle-unselected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-unselected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-unselected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-unselected-pressed-icon-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color:
+          var(--_toggle-unselected-focus-state-layer-color),
+        hover-state-layer-color:
+          var(--_toggle-unselected-hover-state-layer-color),
+        pressed-state-layer-color:
+          var(--_toggle-unselected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .md3-icon-button--on {
+    &:not(:disabled) {
+      background-color: var(--_selected-container-color);
+      color: var(--_toggle-selected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
+        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-state-layer-color:
+          var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
 }
diff --git a/iconbutton/lib/_filled-tonal-icon-button-theme.scss b/iconbutton/lib/_filled-tonal-icon-button-theme.scss
deleted file mode 100644
index 07a0f8f64..000000000
--- a/iconbutton/lib/_filled-tonal-icon-button-theme.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-
-@use '../../ripple/ripple-theme';
-@use '../../sass/color';
-@use '../../sass/resolvers';
-@use '../../sass/theme';
-@use '../../tokens';
-
-@use './icon-button-theme';
-
-$_custom-property-prefix: 'filled-tonal-icon-button';
-
-$light-theme: tokens.md-comp-filled-tonal-icon-button-values();
-$dark-theme: tokens.md-comp-filled-tonal-icon-button-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors(
-    $theme,
-    $variant: 'filled-tonal'
-  );
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors(
-    $theme,
-    $variant: 'filled-tonal'
-  );
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  background-color: var(--_container-color);
-  color: var(--_icon-color);
-
-  &:hover {
-    color: var(--_hover-icon-color);
-  }
-
-  &:focus {
-    color: var(--_focus-icon-color);
-  }
-
-  &:active {
-    color: var(--_pressed-icon-color);
-  }
-
-  &:disabled {
-    background-color: var(--_disabled-container-color);
-    color: var(--_disabled-icon-color);
-  }
-
-  @include ripple-theme.theme(
-    (
-      focus-state-layer-color: var(--_focus-state-layer-color),
-      focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-      hover-state-layer-color: var(--_hover-state-layer-color),
-      hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-      pressed-state-layer-color: var(--_pressed-state-layer-color),
-      pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-    )
-  );
-
-  &.md3-icon-button--toggle-filled-tonal {
-    &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
-      color: var(--_toggle-unselected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-unselected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-unselected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-unselected-pressed-icon-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
-      )
-    );
-  }
-
-  &.md3-icon-button--on {
-    &:not(:disabled) {
-      background-color: var(--_selected-container-color);
-      color: var(--_toggle-selected-icon-color);
-
-      &:hover {
-        color: var(--_toggle-selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_toggle-selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_toggle-selected-pressed-icon-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
-      )
-    );
-  }
-}
diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss
index 8098470a7..d5345fd4c 100644
--- a/iconbutton/lib/_filled-tonal-icon-button.scss
+++ b/iconbutton/lib/_filled-tonal-icon-button.scss
@@ -3,6 +3,127 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally blank for future-proofing.
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../ripple/ripple-theme';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'filled-tonal-icon-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-filled-tonal-icon-button-values(),
+    $tokens
+  );
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .md3-icon-button {
+    background-color: var(--_container-color);
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:disabled {
+      background-color: var(--_disabled-container-color);
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        hover-state-layer-color: var(--_hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-icon-button--toggle-filled-tonal {
+    &:not(:disabled) {
+      background-color: var(--_unselected-container-color);
+      color: var(--_toggle-unselected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-unselected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-unselected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-unselected-pressed-icon-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color:
+          var(--_toggle-unselected-focus-state-layer-color),
+        hover-state-layer-color:
+          var(--_toggle-unselected-hover-state-layer-color),
+        pressed-state-layer-color:
+          var(--_toggle-unselected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .md3-icon-button--on {
+    &:not(:disabled) {
+      background-color: var(--_selected-container-color);
+      color: var(--_toggle-selected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
+        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-state-layer-color:
+          var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
 }
diff --git a/iconbutton/lib/_icon-button.scss b/iconbutton/lib/_icon-button.scss
deleted file mode 100644
index 729e2adff..000000000
--- a/iconbutton/lib/_icon-button.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// This file contains common static styles that are shared across icon button
-// variants.
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use '../../focus/focus-ring';
-@use '../../sass/touch-target';
-
-@mixin static-styles() {
-  :host {
-    display: inline-flex;
-    outline: none;
-
-    @include focus-ring.theme(
-      (
-        container-outer-padding-vertical: 0px,
-        container-outer-padding-horizontal: 0px,
-      )
-    );
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  .md3-icon-button {
-    align-items: center;
-    border: none;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    fill: currentColor;
-    justify-content: center;
-    outline: none;
-    position: relative;
-    text-decoration: none;
-    user-select: none;
-    z-index: 0;
-
-    i,
-    svg,
-    img,
-    ::slotted(*) {
-      display: block;
-    }
-  }
-
-  .md3-icon-button--flip-icon .md3-icon-button__icon {
-    transform: scaleX(-1);
-  }
-
-  .md3-icon-button__icon {
-    display: inline-flex;
-
-    &.md3-icon-button__icon--on {
-      display: none;
-    }
-  }
-
-  .md3-icon-button--on {
-    .md3-icon-button__icon {
-      display: none;
-
-      &.md3-icon-button__icon--on {
-        display: inline-flex;
-      }
-    }
-  }
-
-  .md3-icon-button__link {
-    height: 100%;
-    outline: none;
-    position: absolute;
-    width: 100%;
-  }
-
-  .md3-icon-button__touch {
-    @include touch-target.touch-target;
-  }
-}
diff --git a/iconbutton/lib/_outlined-icon-button-theme.scss b/iconbutton/lib/_outlined-icon-button-theme.scss
deleted file mode 100644
index c4bb9db5d..000000000
--- a/iconbutton/lib/_outlined-icon-button-theme.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-@use '../../ripple/ripple-theme';
-@use '../../sass/resolvers';
-@use '../../sass/color';
-@use '../../sass/theme';
-@use '../../tokens';
-@use './icon-button-theme';
-
-$_custom-property-prefix: 'outlined-icon-button';
-
-// TODO(b/233323674): Remove when missing tokens have been added.
-$_missing-light-theme-tokens: (
-  disabled-selected-container-color:
-    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
-  disabled-selected-container-opacity: 0.12,
-);
-// TODO(b/233323674): Remove when missing tokens have been added.
-$_missing-dark-theme-tokens: (
-  disabled-selected-container-color:
-    map.get(tokens.md-sys-color-values-dark-dynamic(), on-surface),
-  disabled-selected-container-opacity: 0.12,
-);
-$light-theme: map.merge(
-  tokens.md-comp-outlined-icon-button-values(),
-  $_missing-light-theme-tokens
-);
-$dark-theme: map.merge(
-  tokens.md-comp-outlined-icon-button-values(
-    (
-      md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-    ),
-    $exclude-hardcoded-values: true
-  ),
-  $_missing-dark-theme-tokens
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors(
-    $theme,
-    $variant: 'outlined'
-  );
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors(
-    $theme,
-    $variant: 'outlined'
-  );
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  color: var(--_unselected-icon-color);
-
-  @include ripple-theme.theme(
-    (
-      focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-      focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-      hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-      hover-state-layer-opacity: var(--_over-state-layer-opacity),
-      pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-      pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-    )
-  );
-
-  &::before {
-    border-color: var(--_unselected-outline-color);
-    border-width: var(--_unselected-outline-width);
-  }
-
-  &:hover {
-    color: var(--_unselected-hover-icon-color);
-  }
-
-  &:focus {
-    color: var(--_unselected-focus-icon-color);
-  }
-
-  &:active {
-    color: var(--_unselected-pressed-icon-color);
-  }
-
-  &:disabled {
-    color: var(--_disabled-icon-color);
-
-    &::before {
-      border-color: var(--_disabled-outline-color);
-    }
-  }
-
-  // Selected icon button toggle.
-  &.md3-icon-button--on {
-    &:not(:disabled) {
-      background-color: var(--_selected-container-color);
-      color: var(--_selected-icon-color);
-
-      &:hover {
-        color: var(--_selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_selected-pressed-icon-color);
-      }
-    }
-
-    &:disabled {
-      background-color: var(--_disabled-selected-container-color);
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  @media (forced-colors: active) {
-    // Selected button in HCM has an outline.
-    &.md3-icon-button--on {
-      &::before {
-        border-color: var(--_unselected-outline-color);
-        border-width: var(--_unselected-outline-width);
-      }
-
-      &:disabled::before {
-        border-color: var(--_disabled-outline-color);
-      }
-    }
-  }
-}
diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss
index c4deef330..172448355 100644
--- a/iconbutton/lib/_outlined-icon-button.scss
+++ b/iconbutton/lib/_outlined-icon-button.scss
@@ -6,9 +6,92 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../ripple/ripple-theme';
+@use '../../sass/resolvers';
+@use '../../sass/color';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'outlined-icon-button';
+
+@mixin theme($tokens) {
+  // TODO(b/233323674): Remove when missing tokens have been added.
+  $reference: map.merge(
+    tokens.md-comp-outlined-icon-button-values(),
+    (
+      disabled-selected-container-color:
+        map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
+      disabled-selected-container-opacity: 0.12,
+    )
+  );
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-icon-button-values();
+  // TODO(b/233323674): Remove when missing tokens have been added.
+  $tokens: map.merge(
+    $tokens,
+    (
+      disabled-selected-container-color:
+        map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
+      disabled-selected-container-opacity: 0.12,
+    )
+  );
+  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-icon-button--outlined {
     background-color: transparent;
+    color: var(--_unselected-icon-color);
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+
+    &::before {
+      border-color: var(--_unselected-outline-color);
+      border-width: var(--_unselected-outline-width);
+    }
+
+    &:hover {
+      color: var(--_unselected-hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_unselected-focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_unselected-pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+
+      &::before {
+        border-color: var(--_disabled-outline-color);
+      }
+    }
   }
 
   .md3-icon-button--outlined::before {
@@ -27,4 +110,53 @@
   .md3-icon-button--outlined.md3-icon-button--on::before {
     border-width: 0;
   }
+
+  // Selected icon button toggle.
+  .md3-icon-button--on {
+    &:not(:disabled) {
+      background-color: var(--_selected-container-color);
+      color: var(--_selected-icon-color);
+
+      &:hover {
+        color: var(--_selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--_disabled-selected-container-color);
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_selected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        hover-state-layer-color: var(--_selected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  @media (forced-colors: active) {
+    // Selected button in HCM has an outline.
+    .md3-icon-button--on {
+      &::before {
+        border-color: var(--_unselected-outline-color);
+        border-width: var(--_unselected-outline-width);
+      }
+
+      &:disabled::before {
+        border-color: var(--_disabled-outline-color);
+      }
+    }
+  }
 }
diff --git a/iconbutton/lib/_icon-button-theme.scss b/iconbutton/lib/_shared.scss
similarity index 59%
rename from iconbutton/lib/_icon-button-theme.scss
rename to iconbutton/lib/_shared.scss
index 8c884b026..8106736ac 100644
--- a/iconbutton/lib/_icon-button-theme.scss
+++ b/iconbutton/lib/_shared.scss
@@ -3,33 +3,105 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// This file contains common theme mixins that are shared across icon button
+// This file contains common static styles that are shared across icon button
 // variants.
 
-@use 'sass:map';
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
 
-@use '../../ripple/ripple-theme';
+@use 'sass:map';
+@use '../../focus/focus-ring';
 @use '../../sass/color';
-@use '../../sass/theme';
+@use '../../sass/touch-target';
 @use '../../tokens';
 
-@mixin theme-styles() {
-  $touch-target-height: 48px;
+@mixin styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
 
-  height: var(--_container-size);
-  width: var(--_container-size);
-  font-size: var(--_icon-size);
-  margin: max(
-    0px,
-    calc((#{$touch-target-height} - var(--_container-size)) / 2)
-  );
-  border-radius: var(--_container-shape);
+    @include focus-ring.theme(
+      (
+        container-outer-padding-vertical: 0px,
+        container-outer-padding-horizontal: 0px,
+      )
+    );
+  }
 
-  i,
-  svg,
-  img {
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .md3-icon-button {
+    $touch-target-height: 48px;
+
+    align-items: center;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    fill: currentColor;
+    justify-content: center;
+    outline: none;
+    position: relative;
+    text-decoration: none;
+    user-select: none;
+    z-index: 0;
+    height: var(--_container-size);
+    width: var(--_container-size);
+    font-size: var(--_icon-size);
+    margin: max(
+      0px,
+      calc((#{$touch-target-height} - var(--_container-size)) / 2)
+    );
+    border-radius: var(--_container-shape);
+
+    i,
+    svg,
+    img {
+      height: var(--_icon-size);
+      width: var(--_icon-size);
+    }
+
+    i,
+    svg,
+    img,
+    ::slotted(*) {
+      display: block;
+    }
+  }
+
+  .md3-icon-button--flip-icon .md3-icon-button__icon {
+    transform: scaleX(-1);
+  }
+
+  .md3-icon-button__icon {
+    display: inline-flex;
+
+    &.md3-icon-button__icon--on {
+      display: none;
+    }
+  }
+
+  .md3-icon-button--on {
+    .md3-icon-button__icon {
+      display: none;
+
+      &.md3-icon-button__icon--on {
+        display: inline-flex;
+      }
+    }
+  }
+
+  .md3-icon-button__link {
+    height: 100%;
+    outline: none;
+    position: absolute;
+    width: 100%;
+  }
+
+  .md3-icon-button__touch {
+    @include touch-target.touch-target;
   }
 }
 
diff --git a/iconbutton/lib/_standard-icon-button-theme.scss b/iconbutton/lib/_standard-icon-button-theme.scss
deleted file mode 100644
index c1b4d4a59..000000000
--- a/iconbutton/lib/_standard-icon-button-theme.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-
-@use '../../ripple/ripple-theme';
-@use '../../sass/theme';
-@use '../../tokens';
-
-@use './icon-button-theme';
-
-$_custom-property-prefix: 'icon-button';
-
-$light-theme: tokens.md-comp-icon-button-values();
-$dark-theme: tokens.md-comp-icon-button-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles(
-    $light-theme,
-    $theme,
-    $require-all: false
-  );
-  $theme: icon-button-theme.flatten-disabled-colors($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  $touch-target-height: 48px;
-  color: var(--_unselected-icon-color);
-  height: var(--_state-layer-size);
-  width: var(--_state-layer-size);
-  margin: max(
-    0px,
-    calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
-  );
-  @include ripple-theme.theme(
-    (
-      focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-      focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
-      hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-      hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
-      pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-      pressed-state-layer-opacity:
-        var(--_unselected-pressed-state-layer-opacity),
-    )
-  );
-
-  &:hover {
-    color: var(--_unselected-hover-icon-color);
-  }
-
-  &:focus {
-    color: var(--_unselected-focus-icon-color);
-  }
-
-  &:active {
-    color: var(--_unselected-pressed-icon-color);
-  }
-
-  &:disabled {
-    color: var(--_disabled-icon-color);
-  }
-
-  &.md3-icon-button--on {
-    &:not(:disabled) {
-      color: var(--_selected-icon-color);
-
-      &:hover {
-        color: var(--_selected-hover-icon-color);
-      }
-
-      &:focus {
-        color: var(--_selected-focus-icon-color);
-      }
-
-      &:active {
-        color: var(--_selected-pressed-icon-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_selected-pressed-state-layer-opacity),
-      )
-    );
-  }
-}
diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss
index 96d491d77..042ee3a16 100644
--- a/iconbutton/lib/_standard-icon-button.scss
+++ b/iconbutton/lib/_standard-icon-button.scss
@@ -1,13 +1,105 @@
 //
-// Copyright 2021 Google LLC
+// Copyright 2022 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../ripple/ripple-theme';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'icon-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens);
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-icon-button-values();
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-icon-button--standard {
+    $touch-target-height: 48px;
     background-color: transparent;
+    color: var(--_unselected-icon-color);
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+    margin: max(
+      0px,
+      calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
+    );
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
+        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          var(--_unselected-pressed-state-layer-opacity),
+      )
+    );
+
+    &:hover {
+      color: var(--_unselected-hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_unselected-focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_unselected-pressed-icon-color);
+    }
+
+    &:disabled {
+      color: var(--_disabled-icon-color);
+    }
+  }
+
+  .md3-icon-button--on {
+    &:not(:disabled) {
+      color: var(--_selected-icon-color);
+
+      &:hover {
+        color: var(--_selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: var(--_selected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
+        hover-state-layer-color: var(--_selected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          var(--_selected-pressed-state-layer-opacity),
+      )
+    );
   }
 }
diff --git a/iconbutton/lib/filled-styles.scss b/iconbutton/lib/filled-styles.scss
index 230e032c8..5a3435984 100644
--- a/iconbutton/lib/filled-styles.scss
+++ b/iconbutton/lib/filled-styles.scss
@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './filled-icon-button';
-@use './filled-icon-button-theme';
 
-@include filled-icon-button.static-styles();
-
-.md3-icon-button--filled {
-  @include filled-icon-button-theme.theme-styles(
-    filled-icon-button-theme.$light-theme
-  );
-}
+@include filled-icon-button.styles;
diff --git a/iconbutton/lib/filled-tonal-styles.scss b/iconbutton/lib/filled-tonal-styles.scss
index d3e36cbe1..33c1431da 100644
--- a/iconbutton/lib/filled-tonal-styles.scss
+++ b/iconbutton/lib/filled-tonal-styles.scss
@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './filled-tonal-icon-button';
-@use './filled-tonal-icon-button-theme';
 
-@include filled-tonal-icon-button.static-styles();
-
-.md3-icon-button--filled-tonal {
-  @include filled-tonal-icon-button-theme.theme-styles(
-    filled-tonal-icon-button-theme.$light-theme
-  );
-}
+@include filled-tonal-icon-button.styles;
diff --git a/iconbutton/lib/icon-button-styles.scss b/iconbutton/lib/icon-button-styles.scss
deleted file mode 100644
index bc72635c0..000000000
--- a/iconbutton/lib/icon-button-styles.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './icon-button';
-@use './icon-button-theme';
-
-@include icon-button.static-styles;
-
-.md3-icon-button {
-  @include icon-button-theme.theme-styles;
-}
diff --git a/iconbutton/lib/outlined-styles.scss b/iconbutton/lib/outlined-styles.scss
index 6407d14e8..756c72205 100644
--- a/iconbutton/lib/outlined-styles.scss
+++ b/iconbutton/lib/outlined-styles.scss
@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './outlined-icon-button';
-@use './outlined-icon-button-theme';
 
-@include outlined-icon-button.static-styles();
-
-.md3-icon-button--outlined {
-  @include outlined-icon-button-theme.theme-styles(
-    outlined-icon-button-theme.$light-theme
-  );
-}
+@include outlined-icon-button.styles;
diff --git a/iconbutton/lib/shared-styles.scss b/iconbutton/lib/shared-styles.scss
new file mode 100644
index 000000000..c4f743c28
--- /dev/null
+++ b/iconbutton/lib/shared-styles.scss
@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './shared';
+
+@include shared.styles;
diff --git a/iconbutton/lib/standard-styles.scss b/iconbutton/lib/standard-styles.scss
index f347fdee7..a13782441 100644
--- a/iconbutton/lib/standard-styles.scss
+++ b/iconbutton/lib/standard-styles.scss
@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './standard-icon-button';
-@use './standard-icon-button-theme';
 
-@include standard-icon-button.static-styles();
-
-.md3-icon-button--standard {
-  @include standard-icon-button-theme.theme-styles(
-    standard-icon-button-theme.$light-theme
-  );
-}
+@include standard-icon-button.styles;
diff --git a/iconbutton/outlined-icon-button-toggle.ts b/iconbutton/outlined-icon-button-toggle.ts
index 8d7354d5c..37a13d113 100644
--- a/iconbutton/outlined-icon-button-toggle.ts
+++ b/iconbutton/outlined-icon-button-toggle.ts
@@ -9,9 +9,9 @@ import '../icon/icon.js';
 import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {IconButtonToggle} from './lib/icon-button-toggle.js';
 import {styles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/outlined-icon-button.ts b/iconbutton/outlined-icon-button.ts
index 1bead3d35..6993ea791 100644
--- a/iconbutton/outlined-icon-button.ts
+++ b/iconbutton/outlined-icon-button.ts
@@ -10,8 +10,8 @@ import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {IconButton} from './lib/icon-button.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {styles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/outlined-link-icon-button.ts b/iconbutton/outlined-link-icon-button.ts
index b66729bf6..7c09c483c 100644
--- a/iconbutton/outlined-link-icon-button.ts
+++ b/iconbutton/outlined-link-icon-button.ts
@@ -9,9 +9,9 @@ import '../icon/icon.js';
 import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {LinkIconButton} from './lib/link-icon-button.js';
 import {styles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/iconbutton/standard-icon-button-toggle.ts b/iconbutton/standard-icon-button-toggle.ts
index 862b0c8ca..511e0cb59 100644
--- a/iconbutton/standard-icon-button-toggle.ts
+++ b/iconbutton/standard-icon-button-toggle.ts
@@ -9,8 +9,8 @@ import '../icon/icon.js';
 import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 import {styles} from './lib/standard-styles.css.js';
 
 declare global {
diff --git a/iconbutton/standard-icon-button.ts b/iconbutton/standard-icon-button.ts
index f1177a7b4..423bf746b 100644
--- a/iconbutton/standard-icon-button.ts
+++ b/iconbutton/standard-icon-button.ts
@@ -10,7 +10,7 @@ import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {IconButton} from './lib/icon-button.js';
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 import {styles} from './lib/standard-styles.css.js';
 
 declare global {
diff --git a/iconbutton/standard-link-icon-button.ts b/iconbutton/standard-link-icon-button.ts
index d4301d4a5..a557494a6 100644
--- a/iconbutton/standard-link-icon-button.ts
+++ b/iconbutton/standard-link-icon-button.ts
@@ -9,8 +9,8 @@ import '../icon/icon.js';
 import {customElement} from 'lit/decorators.js';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 import {styles} from './lib/standard-styles.css.js';
 
 declare global {