diff --git a/scss/_tags.scss b/scss/_tags.scss
index 79be2d065f..1a71250fcc 100644
--- a/scss/_tags.scss
+++ b/scss/_tags.scss
@@ -47,6 +47,7 @@
     width: var(--#{$prefix}tag-close-size);
     min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap
     height: var(--#{$prefix}tag-close-size);
+    padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome
     margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start);
     color: inherit;
     background-color: transparent;
@@ -66,13 +67,12 @@
 
     &::after {
       display: block;
-      height: 100%;
+      min-width: subtract(var(--#{$prefix}tag-close-size), .625rem);
+      min-height: subtract(var(--#{$prefix}tag-close-size), .625rem);
       content: "";
       background-color: currentcolor;
-      mask-image: escape-svg(var(--#{$boosted-prefix}close-icon));
-      mask-repeat: no-repeat;
-      mask-position: 50%;
-      mask-size: subtract(var(--#{$prefix}tag-close-size), .625rem);
+      -webkit-mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); // stylelint-disable-line property-no-vendor-prefix
+      mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem);
     }
 
     &:hover,
diff --git a/site/content/docs/5.2/components/tags.md b/site/content/docs/5.2/components/tags.md
index e0b6a1fe89..3281683f0b 100644
--- a/site/content/docs/5.2/components/tags.md
+++ b/site/content/docs/5.2/components/tags.md
@@ -124,7 +124,7 @@ We add an extra `<p>` around the `<span>` here for accessibility concerns.
 
 Add `.tag-dark` to the `.tag` for a dark variant.
 
-{{< example class="d-flex gap-2 align-items-center bg-dark" >}}
+{{< example class="d-flex flex-wrap gap-2 align-items-center bg-dark" >}}
 <p class="mb-0"><span class="tag tag-dark">Informative</span></p>
 <button class="tag tag-dark">Filter</button>
 <a class="tag tag-dark" href="#">Navigation</a>
@@ -145,7 +145,7 @@ We add an extra `<p>` around the `<span>` here for accessibility concerns.
 
 Add `.tag-sm` to the `.tag` for a small variant.
 
-{{< example class="d-flex gap-2 align-items-center" >}}
+{{< example class="d-flex flex-wrap gap-2 align-items-center" >}}
 <h3 class="visually-hidden">Small tag variant</h3>
 <p class="mb-0"><span class="tag tag-sm">Informative</span></p>
 <button class="tag tag-sm">Filter</button>
@@ -174,7 +174,7 @@ Disabled tags using the `<a>` element behave a bit different:
 - Disabled tags using `<a>` should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
 - Disabled tags using `<a>` *should not* include the `href` attribute.
 
-{{< example class="d-flex gap-2 align-items-center" >}}
+{{< example class="d-flex flex-wrap gap-2 align-items-center" >}}
 <h3 class="visually-hidden">Disabled tags for the different variants</h3>
 <p class="mb-0"><span class="tag disabled" aria-disabled="true">Informative</span></p>
 <button class="tag" disabled>Filter</button>