Node creator icons realigned, triggers panel icons refreshed
A pair of icon rendering fixes center sub-node icons properly regardless of icon size, and swap in the correct SVG icons for Form Trigger and Webhook nodes in the triggers panel.
The node creator panel had two icon display problems. Sub-node icons in lists like Language Models were drifting off-center because a fixed pixel offset was designed for 26px icons — when icons shrank to 20px or grew to 24px, the decorative background circles no longer aligned. Separately, the triggers panel was showing old Lucide-style icons for Form Trigger and Webhook nodes instead of the newer SVG icons used on the canvas, creating visual inconsistency.
The fix wraps icon elements in a flex container and centers the background circle dynamically rather than relying on a fixed offset. This ensures icons of any size sit perfectly centered. Icon references in the triggers panel now point to the correct node-type icons, which inherit the proper teal and magenta colors from the node definition.
These fixes restore visual polish to the node creator without changing any functional behavior — icons simply look right again.
View Original GitHub Description
Description
Backport of #28515 to release-candidate/2.17.x.
Checklist for the author (@Tuukkaa) to go through.
- Review the backport changes
- Fix possible conflicts
- Merge to target branch
After this PR has been merged, it will be picked up in the next patch release for release track.
Original 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, orBackport to v1(if the PR is an urgent fix that needs to be backported)