diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
index fa42f63e8..92fcfd6b2 100644
--- a/ui/components/component-library/text-field/README.mdx
+++ b/ui/components/component-library/text-field/README.mdx
@@ -89,14 +89,14 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
 </Canvas>
 
 ```jsx
-import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
+import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
 import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library';
 
 <TextField
   placeholder="Search"
   startAccessory={
     <Icon
-      color={COLORS.ICON_ALTERNATIVE}
+      color={IconColor.iconAlternative}
       name={ICON_NAMES.SEARCH}
     />
   }
@@ -108,7 +108,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library
     <ButtonIcon
       iconName={ICON_NAMES.SCAN_BARCODE}
       ariaLabel="Scan QR code"
-      iconProps={{ color: COLORS.PRIMARY_DEFAULT }}
+      iconProps={{ color: IconColor.primaryDefault }}
     />
   }
 />
@@ -129,7 +129,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library
     isAddressValid && (
       <Icon
         name={ICON_NAMES.CHECK}
-        color={COLORS.SUCCESS_DEFAULT}
+        color={IconColor.successDefault}
       />
     )
   }
@@ -215,7 +215,7 @@ const TextFieldCustomInput = (args) => (
     size={SIZES.LG}
     InputComponent={CustomInputComponent}
     startAccessory={
-      <Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET} />
+      <Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
     }
   />
 );