From ed65ef9231a5775e8f812c0054071f6dac829bc8 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 19 Dec 2025 18:57:45 +0200
Subject: [PATCH] fix(editor): Restore correct node icon colors in nodes panel
 (#23152)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/N8nIcon/custom/form.svg             |  1 +
 .../src/components/N8nIcon/custom/webhook.svg          |  1 +
 .../@n8n/design-system/src/components/N8nIcon/icons.ts |  4 ++++
 .../frontend/editor-ui/src/app/components/NodeIcon.vue |  5 ++++-
 .../components/ItemTypes/SubcategoryItem.vue           |  1 +
 .../nodeCreator/components/ItemTypes/ViewItem.vue      |  1 +
 .../shared/nodeCreator/components/NodeCreator.vue      |  2 +-
 .../nodeCreator/components/Panel/NodesListPanel.vue    |  2 +-
 .../src/features/shared/nodeCreator/views/viewsData.ts | 10 ++--------
 9 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/form.svg
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/webhook.svg

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/form.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/form.svg
new file mode 100644
index 00000000000..aacc7a4357b
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/form.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none"><path fill="currentColor" d="M47.267 22.554c-.002.31-.126.608-.344.829l-6.805 6.796a1.13 1.13 0 0 1-.828.344 1.15 1.15 0 0 1-.828-.344 1.18 1.18 0 0 1 0-1.656l5.977-5.969-1.313-1.312-1.383 1.414L28.595 35.78l-4.617.781.781-4.617.336-.336 2.563 2.555c.214.227.515.351.828.343.311.006.611-.119.828-.343a1.18 1.18 0 0 0 0-1.657l-2.563-2.562 8.25-8.273 4.29-4.29 3.757 3.711 1.617-1.617 2.258 2.258c.218.218.342.512.344.82m-17.282 15.15 3.032-3.032v8.297a1.56 1.56 0 0 1-1.563 1.563H4.298a1.56 1.56 0 0 1-1.563-1.563V14.843c0-.405.157-.794.438-1.086l6.304-6.531v5.344H6.251a1.172 1.172 0 1 0 0 2.344h4.43a1.17 1.17 0 0 0 1.171-1.172V5.468h19.602a1.56 1.56 0 0 1 1.563 1.563v13.281L22.86 30.468a1.24 1.24 0 0 0-.328.633l-1.102 6.61c-.06.373.062.753.329 1.023.22.22.517.343.828.343h.195l6.602-1.101a1.16 1.16 0 0 0 .601-.274m-21-16a1.18 1.18 0 0 0 1.172 1.172h15.266a1.172 1.172 0 1 0 0-2.344H10.157a1.17 1.17 0 0 0-1.172 1.172m10.711 14.766a1.17 1.17 0 0 0-1.172-1.172h-8.367a1.172 1.172 0 1 0 0 2.343h8.367a1.17 1.17 0 0 0 1.172-1.172m.86-7.391a1.17 1.17 0 0 0-1.172-1.172h-9.227a1.172 1.172 0 1 0 0 2.344h9.227a1.164 1.164 0 0 0 1.171-1.172M45.75 18.617a1.563 1.563 0 0 0 0-2.203l-1.64-1.64a1.563 1.563 0 0 0-2.204 0l-.93.929 3.852 3.828z"/></svg>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/webhook.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/webhook.svg
new file mode 100644
index 00000000000..2134c3e0d3e
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/webhook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M35 37c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="M35 43c-3 0-5.9-1.4-7.8-3.7l3.1-2.5c1.1 1.4 2.9 2.3 4.7 2.3 3.3 0 6-2.7 6-6s-2.7-6-6-6c-1 0-2 .3-2.9.7l-1.7 1L23.3 16l3.5-1.9 5.3 9.4c1-.3 2-.5 3-.5 5.5 0 10 4.5 10 10S40.5 43 35 43"/><path fill="currentColor" d="M14 43C8.5 43 4 38.5 4 33c0-4.6 3.1-8.5 7.5-9.7l1 3.9C9.9 27.9 8 30.3 8 33c0 3.3 2.7 6 6 6s6-2.7 6-6v-2h15v4H23.8c-.9 4.6-5 8-9.8 8"/><path fill="currentColor" d="M14 37c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="M25 19c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="m15.7 34-3.4-2 5.9-9.7c-2-1.9-3.2-4.5-3.2-7.3 0-5.5 4.5-10 10-10s10 4.5 10 10c0 .9-.1 1.7-.3 2.5l-3.9-1c.1-.5.2-1 .2-1.5 0-3.3-2.7-6-6-6s-6 2.7-6 6c0 2.1 1.1 4 2.9 5.1l1.7 1z"/></svg>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
index 8f3b527dd81..2f2bb74168f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
@@ -4,6 +4,7 @@ import BoltFilled from './custom/bolt-filled.svg';
 import Continue from './custom/continue.svg';
 import EmptyOutput from './custom/empty-output.svg';
 import FilledSquare from './custom/filled-square.svg';
+import Form from './custom/form.svg';
 import GripLinesVertical from './custom/grip-lines-vertical.svg';
 import Lovable from './custom/lovable.svg';
 import Mcp from './custom/mcp.svg';
@@ -33,6 +34,7 @@ import Text from './custom/text.svg';
 import Toolbox from './custom/toolbox.svg';
 import Triangle from './custom/triangle.svg';
 import VectorSquare from './custom/vector-square.svg';
+import Webhook from './custom/webhook.svg';
 
 import IconLucideAlignRight from '~icons/lucide/align-right';
 import IconLucideArchive from '~icons/lucide/archive';
@@ -481,6 +483,8 @@ export const updatedIconSet = {
 	mcp: Mcp,
 	lovable: Lovable,
 	resolver: Resolver,
+	form: Form,
+	webhook: Webhook,
 
 	// lucide
 	'align-right': IconLucideAlignRight,
diff --git a/packages/frontend/editor-ui/src/app/components/NodeIcon.vue b/packages/frontend/editor-ui/src/app/components/NodeIcon.vue
index e618484582a..1da99afa6ee 100644
--- a/packages/frontend/editor-ui/src/app/components/NodeIcon.vue
+++ b/packages/frontend/editor-ui/src/app/components/NodeIcon.vue
@@ -89,6 +89,9 @@ const nodeTypeName = computed(() =>
 
 <style lang="scss" module>
 .nodeIcon {
-	--node--icon--color: var(--canvas-node--icon-color, v-bind(iconColor));
+	--node--icon--color: var(
+		--node-creator--icon--color,
+		var(--canvas-node--icon-color, v-bind(iconColor))
+	);
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/SubcategoryItem.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/SubcategoryItem.vue
index 31459bfcd18..5c36996953b 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/SubcategoryItem.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/SubcategoryItem.vue
@@ -40,6 +40,7 @@ const subcategoryName = computed(() => camelCase(props.item.subcategory || props
 <style lang="scss" module>
 .subCategory {
 	--action--arrow--color: var(--color--text--tint-1);
+	--node--icon--color: var(--node-creator--icon--color);
 	margin-left: 15px;
 	margin-right: 12px;
 }
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/ViewItem.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/ViewItem.vue
index 310c387a011..ca1892bcb16 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/ViewItem.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/ViewItem.vue
@@ -27,6 +27,7 @@ defineProps<Props>();
 <style lang="scss" module>
 .view {
 	--action--arrow--color: var(--color--text--tint-1);
+	--node--icon--color: var(--node-creator--icon--color);
 	margin-left: var(--spacing--sm);
 	margin-right: var(--spacing--xs);
 }
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
index 6236aa78648..f72339dd398 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
@@ -208,7 +208,7 @@ onClickOutside(
 }
 .nodeCreator {
 	--node-creator--width: #{$node-creator-width};
-	--node--icon--color: var(--color--text);
+	--node-creator--icon--color: var(--node--icon--color--neutral);
 	position: fixed;
 	top: $header-height;
 	bottom: 0;
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/NodesListPanel.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/NodesListPanel.vue
index caf5131d26c..73083ef819b 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/NodesListPanel.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/NodesListPanel.vue
@@ -285,7 +285,7 @@ function onBackButton() {
 }
 .nodeIcon {
 	--node--icon--size: 20px;
-	--node--icon--color: var(--color--text);
+	--node-creator--icon--color: var(--node--icon--color--neutral);
 	margin-right: var(--spacing--sm);
 }
 .renderedItems {
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/viewsData.ts b/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/viewsData.ts
index b78a9d3d045..0a9c7ccdfe9 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/viewsData.ts
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/viewsData.ts
@@ -429,10 +429,7 @@ export function TriggerView() {
 					name: WEBHOOK_NODE_TYPE,
 					displayName: i18n.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDisplayName'),
 					description: i18n.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDescription'),
-					iconData: {
-						type: 'file',
-						fileBuffer: '/static/webhook-icon.svg',
-					},
+					iconData: { type: 'icon', icon: 'webhook' },
 				},
 			},
 			{
@@ -444,10 +441,7 @@ export function TriggerView() {
 					name: FORM_TRIGGER_NODE_TYPE,
 					displayName: i18n.baseText('nodeCreator.triggerHelperPanel.formTriggerDisplayName'),
 					description: i18n.baseText('nodeCreator.triggerHelperPanel.formTriggerDescription'),
-					iconData: {
-						type: 'file',
-						fileBuffer: '/static/form-grey.svg',
-					},
+					iconData: { type: 'icon', icon: 'form' },
 				},
 			},
 			{