diff --git a/docs/components/icon.md b/docs/components/icon.md
index 4a02f7fca3..54227dfad9 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -141,8 +141,9 @@ If using SVG icons, add an `aria-label` attribute to the SVG element.
 Token            | Default value
 ---------------- | -----------------------------
 `--md-icon-font` | `'Material Symbols Outlined'`
+`--md-icon-size` | `24px`
 
-*   [All tokens](https://github.com/material-components/material-web/blob/main/icon/internal/_md-comp-icon.scss)
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)
     <!-- {.external} -->
 
 ### Example
@@ -157,13 +158,7 @@ Token            | Default value
 <style>
 md-icon {
   color: #006A6A;
-  font-size: 48px;
-}
-md-icon,
-md-icon > * {
-  /* Resizes any slotted images or SVGs */
-  width: 48px;
-  height: 48px;
+  --md-icon-size: 48px;
 }
 .rounded {
   --md-icon-font: 'Material Symbols Rounded';
diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
index 1f819df25c..d2147e902d 100644
--- a/icon/internal/_icon.scss
+++ b/icon/internal/_icon.scss
@@ -27,15 +27,18 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-icon-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
+  }
 
   :host {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
+    font-size: map.get($tokens, 'size');
+    width: map.get($tokens, 'size');
+    height: map.get($tokens, 'size');
     color: inherit;
     font-variation-settings: inherit;
     font-weight: 400;
-    font-family: var(--md-icon-font, #{map.get($tokens, font)});
+    font-family: map.get($tokens, 'font');
     display: inline-flex;
     font-style: normal;
     line-height: 1;
diff --git a/tokens/_md-comp-icon.scss b/tokens/_md-comp-icon.scss
index 07409528f4..dd924feb6c 100644
--- a/tokens/_md-comp-icon.scss
+++ b/tokens/_md-comp-icon.scss
@@ -10,6 +10,7 @@
 $supported-tokens: (
   // go/keep-sorted start
   'font',
+  'size',
   // go/keep-sorted end
 );
 
@@ -17,6 +18,7 @@ $supported-tokens: (
   @return (
     // go/keep-sorted start
     font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
+    size: if($exclude-hardcoded-values, null, 24px),
     // go/keep-sorted end
   );
 }