diff --git a/.changeset/chatty-months-grow.md b/.changeset/chatty-months-grow.md
new file mode 100644
index 0000000000..1495e7732e
--- /dev/null
+++ b/.changeset/chatty-months-grow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Use correct colour token for TextField clear button icon, prevent layout shift whenever it is hidden or shown and properly size focus area around it. Also stop leading icon shrinking when used together with clear button.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index c122251b5b..6aae715633 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -581,6 +581,7 @@
   width: 1.5rem;
   height: 1.5rem;
   color: var(--canon-fg-primary);
+  flex-shrink: 0;
   display: block;
 }
 
@@ -594,18 +595,25 @@
   cursor: inherit;
   background: none;
   border: none;
+  padding: 0;
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
+.canon-TextFieldInput:not([data-filled]):has( + .canon-TextFieldClearButton) {
+  padding-right: 1.25rem;
+}
+
 .canon-TextFieldInput[type="search"]::-webkit-search-cancel-button, .canon-TextFieldInput[type="search"]::-webkit-search-decoration {
   appearance: none;
 }
 
 .canon-TextFieldClearButton {
-  padding: 0 0 0 var(--canon-space-1);
+  margin-left: var(--canon-space-1);
   vertical-align: middle;
+  color: var(--canon-fg-primary);
   background: none;
   border: none;
+  padding: 0;
   display: none;
 }
 
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index d1f3ba045d..5fb6a934cb 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9805,6 +9805,7 @@
   width: 1.5rem;
   height: 1.5rem;
   color: var(--canon-fg-primary);
+  flex-shrink: 0;
   display: block;
 }
 
@@ -9818,18 +9819,25 @@
   cursor: inherit;
   background: none;
   border: none;
+  padding: 0;
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
+.canon-TextFieldInput:not([data-filled]):has( + .canon-TextFieldClearButton) {
+  padding-right: 1.25rem;
+}
+
 .canon-TextFieldInput[type="search"]::-webkit-search-cancel-button, .canon-TextFieldInput[type="search"]::-webkit-search-decoration {
   appearance: none;
 }
 
 .canon-TextFieldClearButton {
-  padding: 0 0 0 var(--canon-space-1);
+  margin-left: var(--canon-space-1);
   vertical-align: middle;
+  color: var(--canon-fg-primary);
   background: none;
   border: none;
+  padding: 0;
   display: none;
 }
 
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index d55b5b6f2c..a2980d6beb 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -48,6 +48,7 @@
   width: 1.5rem;
   height: 1.5rem;
   color: var(--canon-fg-primary);
+  flex-shrink: 0;
   display: block;
 }
 
@@ -61,18 +62,25 @@
   cursor: inherit;
   background: none;
   border: none;
+  padding: 0;
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
+.canon-TextFieldInput:not([data-filled]):has( + .canon-TextFieldClearButton) {
+  padding-right: 1.25rem;
+}
+
 .canon-TextFieldInput[type="search"]::-webkit-search-cancel-button, .canon-TextFieldInput[type="search"]::-webkit-search-decoration {
   appearance: none;
 }
 
 .canon-TextFieldClearButton {
-  padding: 0 0 0 var(--canon-space-1);
+  margin-left: var(--canon-space-1);
   vertical-align: middle;
+  color: var(--canon-fg-primary);
   background: none;
   border: none;
+  padding: 0;
   display: none;
 }
 
diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx
index df2eb63be3..0615a157a1 100644
--- a/packages/canon/src/components/TextField/TextField.stories.tsx
+++ b/packages/canon/src/components/TextField/TextField.stories.tsx
@@ -130,7 +130,7 @@ export const WithOnClear: Story = {
     ...WithLabel.args,
     placeholder: 'Search...',
     type: 'search',
-    onClear: () => null,
+    onClear: () => console.log('Cleared!'),
   },
 };
 
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index ae901c5cc1..ad3ccc931b 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -65,6 +65,7 @@
   width: 1.5rem;
   height: 1.5rem;
   color: var(--canon-fg-primary);
+  flex-shrink: 0;
 }
 
 .canon-TextFieldInput {
@@ -78,6 +79,11 @@
   width: 100%;
   height: 100%;
   cursor: inherit;
+  padding: 0;
+}
+
+.canon-TextFieldInput:not([data-filled]):has(+ .canon-TextFieldClearButton) {
+  padding-right: 1.25rem;
 }
 
 .canon-TextFieldInput[type='search']::-webkit-search-cancel-button,
@@ -87,10 +93,12 @@
 
 .canon-TextFieldClearButton {
   display: none;
-  padding: 0 0 0 var(--canon-space-1);
+  padding: 0;
+  margin-left: var(--canon-space-1);
   background: none;
   border: none;
   vertical-align: middle;
+  color: var(--canon-fg-primary);
 }
 
 .canon-TextFieldInput[data-filled] + .canon-TextFieldClearButton {