diff --git a/devbox/apps/Input.js b/devbox/apps/Input.js
index a547e6491..68eb5fbcb 100644
--- a/devbox/apps/Input.js
+++ b/devbox/apps/Input.js
@@ -25,6 +25,25 @@ function App() {
         <form>
           <TextInput placeholder="Enter something" pattern="[A-Za-z]+" />
         </form>
+        <TextInput
+          css="width: 80px"
+          adornment={{
+            end: 'ETH',
+            endWidth: 55,
+            endPadding: 8,
+          }}
+        />
+        <TextInput
+          css="width: 80px"
+          adornment={{
+            start: '$',
+            startWidth: 36,
+            startPadding: 8,
+          }}
+        />
+        <TextInput />
+        <TextInput adornment={{ start: <IconBlank /> }} />
+        <TextInput adornment={{ end: <IconBlank /> }} />
         <TextInput
           css="width: 80px"
           adornment="ETH"
diff --git a/src/components/Input/SearchInput.js b/src/components/Input/SearchInput.js
index b6b716afe..cad9a7fc5 100644
--- a/src/components/Input/SearchInput.js
+++ b/src/components/Input/SearchInput.js
@@ -32,26 +32,26 @@ const SearchInput = React.forwardRef(({ onChange, ...props }, ref) => {
   return (
     <TextInput
       ref={_ref}
-      adornment={
-        (props.value || '') === EMPTY ? (
-          <IconSearch
-            css={`
-              color: ${theme.surfaceIcon};
-            `}
-          />
-        ) : (
-          <ButtonIcon
-            onClick={handleClearClick}
-            label="Clear search input"
-            css={`
-              color: ${theme.surfaceIcon};
-            `}
-          >
-            <IconCross />
-          </ButtonIcon>
-        )
-      }
-      adornmentPosition="end"
+      adornment={{
+        end:
+          (props.value || '') === EMPTY ? (
+            <IconSearch
+              css={`
+                color: ${theme.surfaceIcon};
+              `}
+            />
+          ) : (
+            <ButtonIcon
+              onClick={handleClearClick}
+              label="Clear search input"
+              css={`
+                color: ${theme.surfaceIcon};
+              `}
+            >
+              <IconCross />
+            </ButtonIcon>
+          ),
+      }}
       onChange={handleChange}
       {...props}
     />
diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 6f3c3bcc9..be8c8ac1d 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTheme } from '../../theme'
-import { warnOnce } from '../../utils'
+import { warn, warnOnce } from '../../utils'
 import { textStyle, GU, RADIUS } from '../../style'
 
 // Simple text input
@@ -84,24 +84,80 @@ TextInput.defaultProps = {
   type: 'text',
 }
 
+const Adornment = React.memo(({ adornment, position, padding }) => {
+  const theme = useTheme()
+  return (
+    <div
+      css={`
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        ${position === 'end' ? 'right' : 'left'}: ${padding}px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${theme.surfaceContentSecondary};
+      `}
+    >
+      {adornment}
+    </div>
+  )
+})
+
+Adornment.propTypes = {
+  adornment: PropTypes.node,
+  position: PropTypes.oneOf(['start', 'end']),
+  padding: PropTypes.number,
+}
+
+Adornment.defaultProps = {
+  padding: 4,
+}
+
 // Text input wrapped to allow adornments
 const WrapperTextInput = React.forwardRef(
-  (
-    {
-      adornment,
-      adornmentPosition,
-      adornmentSettings: {
-        width: adornmentWidth = 36,
-        padding: adornmentPadding = 4,
-      },
-      ...props
-    },
-    ref
-  ) => {
-    const theme = useTheme()
+  ({ adornment, adornmentPosition, adornmentSettings, ...props }, ref) => {
+    if (adornmentPosition) {
+      warn(
+        'TextInput: The "adornmentPosition" prop is deprecated. Please use the "adornment" prop instead.'
+      )
+    }
+    if (adornmentSettings) {
+      warn(
+        'TextInput: The "adornmentSettings" props is deprecated. Please use the "adornment" prop instead.'
+      )
+    }
+
     if (!adornment) {
       return <TextInput ref={ref} {...props} />
     }
+
+    let adornmentConfig = adornment
+
+    const usingDeprecatedAPI =
+      React.isValidElement(adornment) ||
+      typeof adornment === 'string' ||
+      (typeof adornment === 'object' && adornment.constructor === Array)
+
+    if (usingDeprecatedAPI) {
+      const { adornmentPosition = 'start', adornmentSettings = {} } = props
+      adornmentConfig = {
+        [adornmentPosition]: adornment,
+        [`${adornmentPosition}Padding`]: adornmentSettings.padding,
+        [`${adornmentPosition}Width`]: adornmentSettings.width,
+      }
+    }
+
+    const {
+      start,
+      startPadding,
+      startWidth = 36,
+      end,
+      endPadding,
+      endWidth = 36,
+    } = adornmentConfig
+
     return (
       <div
         css={`
@@ -113,29 +169,21 @@ const WrapperTextInput = React.forwardRef(
         <TextInput
           ref={ref}
           css={`
-            ${adornmentPosition === 'end'
-              ? 'padding-right'
-              : 'padding-left'}: ${adornmentWidth - adornmentPadding * 2}px;
+            ${start && `padding-left: ${startWidth}`}
+            ${end && `padding-right: ${endWidth}`}
           `}
           {...props}
         />
-        <div
-          css={`
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            height: 100%;
-            ${adornmentPosition === 'end'
-              ? 'right'
-              : 'left'}: ${adornmentPadding}px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: ${theme.surfaceContentSecondary};
-          `}
-        >
-          {adornment}
-        </div>
+        {start && (
+          <Adornment
+            adornment={start}
+            padding={startPadding}
+            position="start"
+          />
+        )}
+        {end && (
+          <Adornment adornment={end} padding={endPadding} position="end" />
+        )}
       </div>
     )
   }
@@ -143,7 +191,22 @@ const WrapperTextInput = React.forwardRef(
 
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
-  adornment: PropTypes.node,
+  adornment: PropTypes.oneOf([
+    PropTypes.shape({
+      start: PropTypes.node,
+      startWidth: PropTypes.number,
+      startPadding: PropTypes.number,
+      end: PropTypes.node,
+      endWidth: PropTypes.number,
+      endPadding: PropTypes.number,
+    }),
+    PropTypes.oneOf([null]),
+
+    // deprecated
+    PropTypes.node,
+  ]),
+
+  // deprecated
   adornmentPosition: PropTypes.oneOf(['start', 'end']),
   adornmentSettings: PropTypes.shape({
     width: PropTypes.number,
@@ -154,8 +217,6 @@ WrapperTextInput.propTypes = {
 WrapperTextInput.defaultProps = {
   ...TextInput.defaultProps,
   adornment: null,
-  adornmentPosition: 'start',
-  adornmentSettings: {},
 }
 
 // <input type=number> (only for compat)
diff --git a/src/components/TextCopy/TextCopy.js b/src/components/TextCopy/TextCopy.js
index e7fa6fd9e..51e05e640 100644
--- a/src/components/TextCopy/TextCopy.js
+++ b/src/components/TextCopy/TextCopy.js
@@ -92,25 +92,24 @@ const TextCopy = React.memo(
         )}
         <TextInput
           ref={inputRef}
-          adornment={
-            <ButtonIcon
-              onClick={handleCopy}
-              label="Copy"
-              css={`
-                width: ${HEIGHT - 2}px;
-                height: ${HEIGHT - 2}px;
-                border-radius: 0;
-                color: ${theme.surfaceIcon};
-              `}
-            >
-              <IconCopy />
-            </ButtonIcon>
-          }
-          adornmentPosition="end"
-          adornmentSettings={{
+          adornment={{
+            end: (
+              <ButtonIcon
+                onClick={handleCopy}
+                label="Copy"
+                css={`
+                  width: ${HEIGHT - 2}px;
+                  height: ${HEIGHT - 2}px;
+                  border-radius: 0;
+                  color: ${theme.surfaceIcon};
+                `}
+              >
+                <IconCopy />
+              </ButtonIcon>
+            ),
             // Keep the button square
-            width: HEIGHT - 2,
-            padding: 0,
+            endWidth: HEIGHT - 2,
+            endPadding: 0,
           }}
           autofocus={autofocus}
           onFocus={handleFocus}