diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 508568e1c4..bfd0baebab 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -983,67 +983,90 @@ exports[`renders ./components/input/demo/password-input.md correctly 1`] = `
 `;
 
 exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
-<span
-  class="ant-input-affix-wrapper"
->
+<div>
   <span
-    class="ant-input-prefix"
+    class="ant-input-affix-wrapper"
   >
-    <i
-      aria-label="icon: user"
-      class="anticon anticon-user"
-      style="color:rgba(0,0,0,.25)"
+    <span
+      class="ant-input-prefix"
     >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="user"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <i
+        aria-label="icon: user"
+        class="anticon anticon-user"
+        style="color:rgba(0,0,0,.25)"
       >
-        <path
-          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-        />
-      </svg>
-    </i>
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="user"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </i>
+    </span>
+    <input
+      class="ant-input"
+      placeholder="Enter your username"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <i
+        aria-label="icon: info-circle"
+        class="anticon anticon-info-circle"
+        style="color:rgba(0,0,0,.45)"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </i>
+    </span>
   </span>
-  <input
-    class="ant-input"
-    placeholder="Enter your username"
-    type="text"
-    value=""
-  />
+  <br />
+  <br />
   <span
-    class="ant-input-suffix"
+    class="ant-input-affix-wrapper"
   >
-    <i
-      aria-label="icon: info-circle"
-      class="anticon anticon-info-circle"
-      style="color:rgba(0,0,0,.45)"
+    <span
+      class="ant-input-prefix"
     >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-        <path
-          d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-        />
-      </svg>
-    </i>
+      ￥
+    </span>
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      RMB
+    </span>
   </span>
-</span>
+</div>
 `;
 
 exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index 59fcc00e84..06ed0b755b 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -17,15 +17,22 @@ Add prefix or suffix icons inside input.
 import { Input, Tooltip, Icon } from 'antd';
 
 ReactDOM.render(
-  <Input
-    placeholder="Enter your username"
-    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
-    suffix={
-      <Tooltip title="Extra information">
-        <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
-      </Tooltip>
-    }
-  />,
+  <div>
+    <Input
+      placeholder="Enter your username"
+      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+      suffix={
+        <Tooltip title="Extra information">
+          <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
+        </Tooltip>
+      }
+    />
+
+    <br />
+    <br />
+
+    <Input prefix="￥" suffix="RMB" />
+  </div>,
   mountNode,
 );
 ```
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index 827a8bfc52..9aedbab4c9 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -369,25 +369,23 @@
     text-align: inherit;
   }
 
+  // Should not break align of icon & text
+  // https://github.com/ant-design/ant-design/issues/18087
+  // https://github.com/ant-design/ant-design/issues/17414
+  // https://github.com/ant-design/ant-design/pull/17684
+  // https://codesandbox.io/embed/pensive-paper-di2wk
+  // https://codesandbox.io/embed/nifty-benz-gb7ml
   .@{inputClass}-prefix,
   .@{inputClass}-suffix {
     position: absolute;
-    top: 0;
+    top: 50%;
     z-index: 2;
     color: @input-color;
     line-height: 0;
-    height: 100%;
-    box-sizing: border-box;
-    padding: @input-padding-vertical-base + @border-width-base 0;
+    transform: translateY(-50%);
     :not(.anticon) {
       line-height: @line-height-base;
     }
-    .anticon {
-      position: relative;
-      vertical-align: top;
-      top: 50%;
-      transform: translateY(-50%);
-    }
   }
 
   .@{inputClass}-prefix {