diff --git a/.changeset/spotty-papers-call.md b/.changeset/spotty-papers-call.md
new file mode 100644
index 0000000000..3e39e8e1f8
--- /dev/null
+++ b/.changeset/spotty-papers-call.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+The icon prop in TextField now accept a ReactNode instead of an icon name. We also updated the icon sizes for each input sizes.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 6aae715633..d479444df9 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -576,13 +576,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 5fb6a934cb..6c53aaa198 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9800,13 +9800,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index a2980d6beb..c3c1a88ad6 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -43,13 +43,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index da1b5015b4..dec30129e3 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -174,8 +174,8 @@ export const buttonPropDefs: {
 export interface ButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children: React.ReactNode;
-  iconEnd?: ReactElement;
-  iconStart?: ReactElement;
+  iconEnd?: React.ReactNode;
+  iconStart?: React.ReactNode;
   size?: ButtonOwnProps['size'];
   variant?: ButtonOwnProps['variant'];
 }
@@ -1220,7 +1220,7 @@ export interface TextFieldProps
   className?: string;
   description?: string;
   error?: string | null;
-  icon?: IconNames;
+  icon?: React.ReactNode;
   label?: string;
   name: string;
   onClear?: React.MouseEventHandler<HTMLButtonElement>;
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index e9774ad083..ab70f168c8 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -24,7 +24,7 @@ import type { ButtonProps } from './types';
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, ref) => {
     const {
-      size = 'small',
+      size = 'medium',
       variant = 'primary',
       disabled,
       iconStart,