diff --git a/packages/canon/css/button.css b/packages/canon/css/button.css
index eb0c44ce1b..7aaad3ec48 100644
--- a/packages/canon/css/button.css
+++ b/packages/canon/css/button.css
@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index f67d0b332d..f4c8008673 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -134,14 +134,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-CollapsiblePanel {
@@ -521,14 +521,14 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextField {
diff --git a/packages/canon/css/iconbutton.css b/packages/canon/css/iconbutton.css
index e867a1848e..dc3f9d94c5 100644
--- a/packages/canon/css/iconbutton.css
+++ b/packages/canon/css/iconbutton.css
@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 0fa08102fd..141bc1b5fb 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9358,14 +9358,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-CollapsiblePanel {
@@ -9745,14 +9745,14 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextField {