diff --git a/.changeset/new-pets-care.md b/.changeset/new-pets-care.md
new file mode 100644
index 000000000..dd54d57fb
--- /dev/null
+++ b/.changeset/new-pets-care.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `--icon-size` CSS custom property to the Icon component to allow sizing via CSS without impacting `font-size` or selector depth.
diff --git a/.changeset/odd-sloths-allow.md b/.changeset/odd-sloths-allow.md
new file mode 100644
index 000000000..90a396e7f
--- /dev/null
+++ b/.changeset/odd-sloths-allow.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Remove extra `.c-button__extra` selectors from WordPress block button styles.
diff --git a/.changeset/tough-books-sing.md b/.changeset/tough-books-sing.md
new file mode 100644
index 000000000..d59356fbb
--- /dev/null
+++ b/.changeset/tough-books-sing.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Size Icons consistently in Buttons. Previously, Icon-only Buttons achieved by including an Icon as the primary content were inconsistently sized compared to Icons included before or after a label.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 896fff6c9..c1b356d84 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -19,3 +19,19 @@
 .c-button--tertiary {
   @include button.tertiary;
 }
+
+/**
+ * Element: Extra
+ */
+
+.c-button__extra {
+  @include button.extra;
+
+  /**
+   * Show visual slash through element when button is in slashed state
+   */
+
+  .c-button.is-slashed & {
+    @include button.extra-slashed;
+  }
+}
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 5827396ff..20cf1d8fa 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -6,6 +6,7 @@
   @include svg.inherit-color;
   @include svg.inherit-size;
   display: inline-block;
+  font-size: var(--icon-size, inherit);
   position: relative;
   vertical-align: middle;
 }
diff --git a/src/components/icon/icon.stories.mdx b/src/components/icon/icon.stories.mdx
index 709c724c0..f5509775a 100644
--- a/src/components/icon/icon.stories.mdx
+++ b/src/components/icon/icon.stories.mdx
@@ -57,6 +57,10 @@ Icons without a flex or grid container may appear [slightly low in comparison to
   </Story>
 </Canvas>
 
+## CSS Properties
+
+- `--icon-size`: By default, icons are sized based on `font-size`. Alternatively, `--icon-size` may be used in cases where you want to size an icon without impacting `font-size`.
+
 ## Template Properties
 
 The component template supports the following unique properties:
diff --git a/src/design/icons/icons.stories.mdx b/src/design/icons/icons.stories.mdx
index ea2686e24..722885ff6 100644
--- a/src/design/icons/icons.stories.mdx
+++ b/src/design/icons/icons.stories.mdx
@@ -44,7 +44,7 @@ const brandIconElements = brandIconDir.keys().map((key) => {
 
 Our icons are designed to be compact yet friendly. They embrace bold shapes, rounded corners and circular caps. They work well adjacent to text, but should rarely be used on their own to convey meaning.
 
-For icon usage examples, see [the icon object](/docs/components-icon--basic).
+For icon usage examples, see [the icon component](/docs/components-icon--basic).
 
 <IconGallery>{iconElements}</IconGallery>
 
diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss
index 4e9d53a88..c57bdcafb 100644
--- a/src/mixins/_button.scss
+++ b/src/mixins/_button.scss
@@ -46,6 +46,7 @@
  */
 
 @mixin default {
+  --icon-size: #{size.$icon-medium};
   align-items: center;
   background: var(--theme-color-background-button-default);
   border-color: var(--theme-color-border-button-default);
@@ -93,65 +94,6 @@
     transform: none;
   }
 
-  .c-button__extra {
-    display: flex;
-    font-size: size.$icon-medium;
-    margin: 0 size.$spacing-gap-button-extra;
-    position: relative;
-
-    &:first-child {
-      margin-left: size.$spacing-gap-button-extra * -1;
-    }
-
-    &:last-child {
-      margin-right: size.$spacing-gap-button-extra * -1;
-    }
-  }
-
-  /**
-   * Adds a slash across the "extra" content (most times "extra" content is an icon).
-   */
-  &.is-slashed {
-    .c-button__extra {
-      &::after {
-        background: currentColor;
-        border-radius: size.$border-radius-full;
-        content: '';
-        height: size.$edge-medium;
-        left: 0;
-        position: absolute;
-        top: 50%;
-        transform: rotate(-30deg);
-        width: 100%;
-      }
-
-      $clip-path: polygon(
-        -5% -5%,
-        105% -5%,
-        105% 23%,
-        -5% 87%,
-        -5% 101.4711%,
-        105% 37.9626%,
-        105% 105%,
-        -5% 105%
-      );
-
-      /**
-       * 1. Fixes a bug where some browsers would render the element as
-       *    slightly offset from others.
-       * 2. Helps normalize the box the clipping path renders to.
-       */
-      & > * {
-        clip-path: $clip-path;
-        transform: translate(0, 0); /* 1 */
-
-        @supports (clip-path: view-box) {
-          clip-path: view-box $clip-path; /* 2 */
-        }
-      }
-    }
-  }
-
   @include focus.focus-visible {
     box-shadow: 0 0 0 size.$edge-large color.$brand-primary-lighter;
   }
@@ -176,3 +118,57 @@
   border-color: transparent;
   color: var(--theme-color-text-button-tertiary);
 }
+
+/// Rules for extra element. Used to contain icons or other visual affordances.
+@mixin extra {
+  display: flex;
+  margin: 0 size.$spacing-gap-button-extra;
+  position: relative;
+
+  &:first-child {
+    margin-left: size.$spacing-gap-button-extra * -1;
+  }
+
+  &:last-child {
+    margin-right: size.$spacing-gap-button-extra * -1;
+  }
+}
+
+/// Clip path used for extra element when button's slashed state is active
+$extra-slashed-clip-path: polygon(
+  -5% -5%,
+  105% -5%,
+  105% 23%,
+  -5% 87%,
+  -5% 101.4711%,
+  105% 37.9626%,
+  105% 105%,
+  -5% 105%
+);
+
+// Styles for extra specific to slashed button state
+@mixin extra-slashed {
+  &::after {
+    background: currentColor;
+    border-radius: size.$border-radius-full;
+    content: '';
+    height: size.$edge-medium;
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: rotate(-30deg);
+    width: 100%;
+  }
+
+  // 1. Fixes a bug where some browsers would render the element as
+  //    slightly offset from others.
+  // 2. Helps normalize the box the clipping path renders to.
+  & > * {
+    clip-path: $extra-slashed-clip-path;
+    transform: translate(0, 0); // 1
+
+    @supports (clip-path: view-box) {
+      clip-path: view-box $extra-slashed-clip-path; // 2
+    }
+  }
+}
diff --git a/src/prototypes/article-listing/example/example.scss b/src/prototypes/article-listing/example/example.scss
index 1074f666c..46a288224 100644
--- a/src/prototypes/article-listing/example/example.scss
+++ b/src/prototypes/article-listing/example/example.scss
@@ -88,8 +88,4 @@
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
-
-  .search-btn .c-icon {
-    font-size: ms.step(1);
-  }
 }
diff --git a/src/prototypes/article-listing/example/example.twig b/src/prototypes/article-listing/example/example.twig
index b78de8bb9..3764275f5 100644
--- a/src/prototypes/article-listing/example/example.twig
+++ b/src/prototypes/article-listing/example/example.twig
@@ -189,8 +189,9 @@
             }  %}
               {% block content %}
                 {% include '@cloudfour/components/icon/icon.twig' with {
-                  name: 'magnifying-glass'
-                } %}
+                  name: 'magnifying-glass',
+                  inline: true
+                } only %}
               {% endblock %}
             {% endembed %}
           </div>