diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx
index 6bdc991f5..919adb538 100644
--- a/src/components/Inputs/TextInput/TextInput.tsx
+++ b/src/components/Inputs/TextInput/TextInput.tsx
@@ -3,7 +3,7 @@ import DisabledContext, {
     Disabled,
 } from '../../ConfigProvider/DisabledContext';
 import { ShapeContext, Shape, SizeContext, Size } from '../../ConfigProvider';
-import { ButtonSize, DefaultButton, SystemUIButton } from '../../Button';
+import { ButtonShape, ButtonSize, SystemUIButton } from '../../Button';
 import { Icon, IconName, IconSize } from '../../Icon';
 import { Label, LabelSize } from '../../Label';
 import {
@@ -17,6 +17,7 @@ import { FormItemInputContext } from '../../Form/Context';
 import { ValidateStatus } from '../../Form/Form.types';
 import { useDebounce } from '../../../hooks/useDebounce';
 import {
+    eventKeys,
     getMergedStatus,
     mergeClasses,
     resolveOnChange,
@@ -301,6 +302,15 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
             }
         }, [clear]);
 
+        const handleOnKeydownClear = (_event: React.KeyboardEvent) => {
+            if (
+                document.activeElement !== clearButtonRef?.current &&
+                _event.key === eventKeys.ENTER
+            ) {
+                return;
+            }
+            handleOnClear;
+        };
         const handleOnClear = (_event: React.MouseEvent) => {
             _event.preventDefault();
             _event.stopPropagation();
@@ -360,6 +370,15 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
             return iconSize;
         };
 
+        const inputShapeToButtonShapeMap = new Map<
+            TextInputShape | Shape,
+            ButtonShape
+        >([
+            [TextInputShape.Pill, ButtonShape.Round],
+            [TextInputShape.Rectangle, ButtonShape.Rectangle],
+            [TextInputShape.Underline, ButtonShape.Rectangle],
+        ]);
+
         const inputSizeToIconSizeMap = new Map<TextInputSize | Size, IconSize>([
             [TextInputSize.Flex, getIconSize()],
             [TextInputSize.Large, IconSize.Large],
@@ -439,6 +458,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
                                     path: iconButtonProps.iconProps.path,
                                 }}
                                 id={iconButtonProps.id}
+                                shape={inputShapeToButtonShapeMap.get(shape)}
                                 size={inputSizeToButtonSizeMap.get(mergedSize)}
                                 htmlType={iconButtonProps.htmlType}
                             />
@@ -467,7 +487,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
                                 </div>
                             )}
                             {iconButtonProps && (
-                                <DefaultButton
+                                <SystemUIButton
                                     allowDisabledFocus={
                                         iconButtonProps.allowDisabledFocus
                                     }
@@ -478,34 +498,48 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
                                         iconButtonProps.disabled ||
                                         mergedDisabled
                                     }
+                                    htmlType={iconButtonProps.htmlType}
                                     iconProps={{
                                         path: iconButtonProps.iconProps.path,
                                     }}
                                     id={iconButtonProps.id}
                                     onClick={iconButtonProps.onClick}
+                                    shape={inputShapeToButtonShapeMap.get(
+                                        shape
+                                    )}
                                     size={inputSizeToButtonSizeMap.get(
                                         mergedSize
                                     )}
-                                    htmlType={iconButtonProps.htmlType}
+                                    transparent
                                 />
                             )}
                             {clearable &&
                                 clearButtonShown &&
                                 !numbersOnly &&
                                 htmlType !== 'number' && (
-                                    <DefaultButton
+                                    <SystemUIButton
                                         ref={clearButtonRef}
                                         allowDisabledFocus={allowDisabledFocus}
                                         ariaLabel={clearButtonAriaLabel}
                                         classNames={clearIconButtonClassNames}
                                         disabled={mergedDisabled}
+                                        htmlType={'button'}
                                         iconProps={{ path: IconName.mdiClose }}
                                         onClick={
                                             !allowDisabledFocus
                                                 ? handleOnClear
                                                 : null
                                         }
+                                        onKeyDown={
+                                            !allowDisabledFocus
+                                                ? handleOnKeydownClear
+                                                : null
+                                        }
+                                        shape={inputShapeToButtonShapeMap.get(
+                                            shape
+                                        )}
                                         size={ButtonSize.Small}
+                                        transparent
                                     />
                                 )}
                         </div>
diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
index ba3f18f55..4272e7687 100644
--- a/src/components/Inputs/input.module.scss
+++ b/src/components/Inputs/input.module.scss
@@ -913,11 +913,10 @@
     }
 
     .icon-button {
-        background-color: transparent;
         bottom: 1px;
         color: var(--grey-color-60);
-        height: 34px;
-        padding: $button-padding-vertical-small $space-xxs;
+        height: $input-small-size;
+        padding: $space-xxs;
         position: absolute;
         transition: none;
 
@@ -936,7 +935,6 @@
         &:active,
         &:focus {
             background-color: transparent;
-            padding: $button-padding-vertical-small $space-xxs;
 
             svg {
                 color: var(--grey-color-60);
@@ -945,7 +943,6 @@
 
         &:hover {
             background-color: transparent;
-            padding: $button-padding-vertical-small $space-xxs;
             outline-color: transparent;
 
             svg {
@@ -955,7 +952,6 @@
     }
 
     .clear-icon-button {
-        background-color: transparent;
         bottom: 1px;
         color: var(--grey-color-60);
         height: 35px;
@@ -1290,8 +1286,8 @@
         }
 
         .icon-button {
-            bottom: $space-xxxs;
-            height: $space-xxl;
+            bottom: 0;
+            height: 44px;
 
             &.left-icon {
                 left: $space-xs;
@@ -1347,9 +1343,9 @@
         }
 
         .icon-button {
-            bottom: 1px;
-            height: 34px;
-            padding: $button-padding-vertical-small $space-xxs;
+            bottom: $space-xxs;
+            height: 28px;
+            padding: $space-xxs;
 
             &.left-icon {
                 left: $space-xxs;
@@ -1469,13 +1465,6 @@
 
         .expandable-thumb {
             position: absolute;
-            left: -4px;
-        }
-
-        &.input-large {
-            .expandable-thumb {
-                left: -2px;
-            }
         }
 
         .overlay {
@@ -1607,8 +1596,7 @@
         .icon-button {
             &.focus-visible,
             &:focus-visible {
-                background-color: var(--background-color);
-                padding: $button-padding-vertical-small $space-xxs;
+                background-color: transparent;
 
                 svg {
                     color: var(--grey-color-60);
diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap
index 7f44a6a6b..d2775bb68 100644
--- a/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Select Select is large 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-large pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-large icon-left"
               type="button"
             >
               <span
@@ -104,7 +104,7 @@ exports[`Select Select is medium 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-medium pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
               type="button"
             >
               <span
@@ -170,7 +170,7 @@ exports[`Select Select is pill shaped 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-medium pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-medium round-shape icon-left"
               type="button"
             >
               <span
@@ -236,7 +236,7 @@ exports[`Select Select is rectangle shaped 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-medium pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
               type="button"
             >
               <span
@@ -302,7 +302,7 @@ exports[`Select Select is small 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-small pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-small icon-left"
               type="button"
             >
               <span
@@ -368,7 +368,7 @@ exports[`Select Select is underline shaped 1`] = `
             />
             <button
               aria-disabled="false"
-              class="icon-button right-icon button button-default button-medium pill-shape icon-left"
+              class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
               type="button"
             >
               <span