Node creator icons centered and updated to match canvas

Tuukkaa

·Apr 15, 2026·#28515fix(editor): Center sub-node icons and refresh triggers panel icons

Sub-node icons in the Language Models panel now render centered regardless of size, and trigger panel entries display the same SVG icons shown on the canvas.

Icons in the node creator panel were misaligned after an earlier update introduced variable-size icons. Sub-node icons in the Language Models list drifted 3 pixels toward the top-left on smaller icons, while Form Trigger and Webhook entries showed outdated Lucide-style icons instead of the modern SVG icons used on the canvas.

The fix replaces hardcoded positioning with flexible centering that adapts to any icon size. Icon containers now use standard centering math — positioning the circle at 50% from top and left, then shifting back by half the element's own dimensions — so smaller and larger icons align correctly. Trigger panel entries now reference the same node icon names used elsewhere in the app, ensuring consistent visuals across the interface.

These changes restore visual consistency in the node creator, making it easier to scan and select nodes without icon misalignment or unexpected visual jumps between panels.

View Original GitHub Description

Summary

Fixes icon rendering issues in the node creator panel that surfaced after #28104 introduced variable-size node icons (24px for new SVGs, 20px for old file icons).

1. Sub-node icons misaligned in the Language Models / sub-node list

The 40×40 supplemental background circle was positioned via transform: translate(-7px, -7px) — that offset was designed for a 26px icon (so the icon center landed at (13, 13), matching the circle center). After icon sizes became variable, the circle no longer centered on the icon:

20px icons (e.g. Vercel AI Gateway, xAI Grok) → icon center at (10, 10) vs circle center at (13, 13) → 3px offset toward top-left
24px icons (e.g. Lemonade, Ollama) → 1px subtle vertical/horizontal drift

Fix: wrap the slot contents in a relatively-positioned flex container and center the circle via top: 50%; left: 50%; transform: translate(-50%, -50%) so it aligns with any icon size.

2. Form Trigger and Webhook nodes used stale icons in the triggers panel

The triggers panel in viewsData.ts hardcoded old icon overrides via iconData: { type: 'icon', icon: 'form' | 'webhook' }, pointing at the old Lucide-style icons instead of the new node:form-trigger / node:webhook SVGs used on canvas. Switched to icon: 'node:form-trigger' / icon: 'node:webhook' — the node-type store fallback in getNodeIconSource picks up the correct icon color (teal / magenta) from the real node type.

How to test

Open an AI Agent node on the canvas, click the + near "Model" — all icons in the Language Models panel should be centered within their circular containers.
Open the trigger node creator panel — "On form submission" and "On webhook call" entries should show the same SVG + color as their respective nodes on the canvas.

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/DS-521

Review / Merge checklist

I have seen this code, I have run this code, and I take responsibility for this code.
PR title and summary are descriptive.
Docs updated or follow-up ticket created.
Tests included.
PR Labeled with Backport to Beta, Backport to Stable, or Backport to v1 (if the PR is an urgent fix that needs to be backported)