void
+}
+
+export function BrandIconPicker({ value, onSelect }: BrandIconPickerProps) {
+ const [query, setQuery] = useState('')
+ const [limit, setLimit] = useState(PAGE)
+
+ const filtered = useMemo(() => {
+ const q = query.trim().toLowerCase()
+ if (!q) return SLUGS
+ return SLUGS.filter((s) => s.includes(q))
+ }, [query])
+
+ const visible = filtered.slice(0, limit)
+ const selectedSlug = value?.startsWith(BRAND_ICON_PREFIX) ? value.slice(BRAND_ICON_PREFIX.length) : null
+
+ return (
+ >({ ...DEFAULT_DATA, ...initial })
const [iconSearch, setIconSearch] = useState('')
const [iconPickerOpen, setIconPickerOpen] = useState(false)
+ const [iconTab, setIconTab] = useState<'generic' | 'brand'>(isBrandIconKey(initial?.custom_icon) ? 'brand' : 'generic')
const [labelError, setLabelError] = useState(false)
const resolvedNodeColors = resolveNodeColors({ type: form.type ?? 'generic', custom_colors: form.custom_colors })
const showServicesEnabled = form.custom_colors?.show_services === true
@@ -152,6 +154,10 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
>
{(() => {
+ if (isBrandIconKey(form.custom_icon)) {
+ const slug = brandIconSlug(form.custom_icon!)
+ return <>})
{slug}
+ }
const entry = ICON_REGISTRY.find((e) => e.key === form.custom_icon)
if (entry) {
return <>{createElement(entry.icon, { size: 13, className: 'text-[#00d4ff] shrink-0' })}{entry.label}
@@ -167,6 +173,37 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
{/* Inline icon picker - full width, shown below the type+icon row */}
{iconPickerOpen && (
)}
diff --git a/frontend/src/components/ui/NodeIcon.tsx b/frontend/src/components/ui/NodeIcon.tsx
new file mode 100644
index 0000000..308d32e
--- /dev/null
+++ b/frontend/src/components/ui/NodeIcon.tsx
@@ -0,0 +1,35 @@
+import { createElement } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { resolveCustomIcon, brandIconUrl, isBrandIconKey } from '@/utils/nodeIcons'
+
+interface NodeIconProps {
+ /** Default icon for the node type (lucide). Used when no customIconKey or unknown key. */
+ typeIcon: LucideIcon
+ /** Optional override key. Legacy lucide keys or `brand:
+ { setQuery(e.target.value); setLimit(PAGE) }}
+ placeholder={`Search ${SLUGS.length} brand icons...`}
+ className="bg-[#0d1117] border-[#30363d] text-xs h-7"
+ aria-label="Brand icon search"
+ />
+
+ )
+}
diff --git a/frontend/src/components/modals/NodeModal.tsx b/frontend/src/components/modals/NodeModal.tsx
index 714d67b..da28e01 100644
--- a/frontend/src/components/modals/NodeModal.tsx
+++ b/frontend/src/components/modals/NodeModal.tsx
@@ -8,7 +8,8 @@ import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select'
import { NODE_TYPE_LABELS, type NodeData, type NodeType, type CheckMethod } from '@/types'
import { resolveNodeColors } from '@/utils/nodeColors'
-import { ICON_REGISTRY, ICON_CATEGORIES, NODE_TYPE_DEFAULT_ICONS } from '@/utils/nodeIcons'
+import { ICON_REGISTRY, ICON_CATEGORIES, NODE_TYPE_DEFAULT_ICONS, isBrandIconKey, brandIconSlug, brandIconUrl } from '@/utils/nodeIcons'
+import { BrandIconPicker } from './BrandIconPicker'
import { MIN_BOTTOM_HANDLES, MAX_BOTTOM_HANDLES, clampBottomHandles } from '@/utils/handleUtils'
const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
@@ -61,6 +62,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
const [form, setForm] = useState
+ {filtered.length} match{filtered.length === 1 ? '' : 'es'} · icons served via jsDelivr CDN
+
+
+
+
+ {visible.map((slug) => {
+ const selected = slug === selectedSlug
+ return (
+
+ )
+ })}
+
+ {filtered.length > limit && (
+
+ )}
+ {filtered.length === 0 && (
+ No icons match.
+ )}
+
+ { set('custom_icon', key); setIconPickerOpen(false) }}
+ />
+ ) : (
+ <>
setIconSearch(e.target.value)}
@@ -212,6 +249,8 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
)
})}
+
+ )}
+
+
+
+ {iconTab === 'brand' ? (
+