diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index 73c7469157..c2775f7046 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -13,10 +13,24 @@
   --color: #{$back-button-ios-color};
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
+  /**
+   * The icon should be sized relative
+   * to the size of the text which is
+   * why we use em here instead of rem.
+   * This allows developers to override
+   * the text font size while ensuring that
+   * the icon is sized relative to that.
+   */
   --icon-font-size: 1.6em;
   --min-height: 32px;
 
-  font-size: 17px;
+  /**
+   * Main content should be prioritized over the back
+   * button which is why a maximum font size is applied.
+   * Also, we want the text to remain readable
+   * so a minimum font size is applied.
+   */
+  font-size: clamp(17px, 1.0625rem, 22px);
 }
 
 .button-native {
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 847ec61a76..5b886f87bb 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -13,14 +13,14 @@
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
-  --icon-font-size: 24px;
+  --icon-font-size: 1.5rem;
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
 
   text-transform: uppercase;
@@ -30,7 +30,14 @@
   --border-radius: 50%;
 
   min-width: 48px;
-  height: 48px;
+  min-height: 48px;
+
+  /**
+   * This allows the icon only button to
+   * keep its circular shape even when the
+   * text scales up.
+   */
+  aspect-ratio: 1 / 1;
 }
 
 .button-native {