diff --git a/UNRELEASED.md b/UNRELEASED.md
index 647a295fde3..8e74e5152d8 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - **`Button`:** `loading` no longer sets the invalid `role="alert"` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
 - Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Fixed `Modal` header border color ([#3616](https://github.com/Shopify/polaris-react/pull/3616))
+- Fixed `TopBar` search clear button alignment on iOS ([#3618](https://github.com/Shopify/polaris-react/pull/3618))
 
 ### Documentation
 
diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss
index 62bbe2decdd..996368a3f9c 100644
--- a/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/src/components/TopBar/components/SearchField/SearchField.scss
@@ -4,7 +4,7 @@
 $icon-size: rem(20px);
 $input-height: rem(34px);
 $new-input-height: rem(36px);
-$clear-button-width: $icon-size + spacing();
+$search-icon-width: $icon-size + spacing();
 
 $stacking-order: (
   backdrop: 1,
@@ -85,9 +85,9 @@ $stacking-order: (
 .Input {
   @include text-style-input;
   z-index: z-index(input, $stacking-order);
-  width: calc(100% - #{$clear-button-width});
+  width: calc(100% - #{$search-icon-width});
   height: $input-height;
-  padding: 0 0 0 $clear-button-width;
+  padding: 0 0 0 $search-icon-width;
   border: none;
   background-color: transparent;
   outline: none;
@@ -133,11 +133,10 @@ $stacking-order: (
   @include focus-ring($size: 'wide');
   position: relative;
   z-index: z-index(action, $stacking-order);
-  align-self: stretch;
   border: none;
   appearance: none;
   background: transparent;
-  width: $clear-button-width;
+  padding: spacing(tight);
 
   &:focus,
   &:hover {