fix: clean up unused icons and add LoadImage lucide icon override (#9359)

## Summary

Remove 46 unused snake_case SVG icons from design-system and use lucide
icon for LoadImage.

## Changes

- **What**: Remove unreferenced snake_case SVG files, replace LoadImage
custom icon with `lucide--image-up`, add `preview-image.svg` (renamed
from `image-preview.svg` to match `kebabCase('PreviewImage')`), extract
`ESSENTIALS_ICON_OVERRIDES` to `essentialsNodes.ts`
- Remove `load-image` from safelist in `style.css`

<img width="307" height="701" alt="image"
src="https://github.com/user-attachments/assets/de5e1bde-03eb-415e-ac76-f2e653a5eeb2"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9359-fix-clean-up-unused-icons-and-add-LoadImage-lucide-icon-override-3186d73d36508159be05ce6f4145be56)
by [Unito](https://www.unito.io)

src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts

@@ -89,22 +89,22 @@ describe('EssentialNodeCard', () => {
   })
 
   describe('icon generation', () => {
-    it('should use kebab-case of node name for icon', () => {
+    it('should use override icon for LoadImage', () => {
       const wrapper = mountComponent(createMockNode({ name: 'LoadImage' }))
       const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-[comfy--load-image]')
+      expect(icon.classes()).toContain('icon-s1.3-[lucide--image-up]')
     })
 
-    it('should use kebab-case for SaveImage', () => {
+    it('should use override icon for SaveImage', () => {
       const wrapper = mountComponent(createMockNode({ name: 'SaveImage' }))
       const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-[comfy--save-image]')
+      expect(icon.classes()).toContain('icon-s1.3-[lucide--image-down]')
     })
 
-    it('should use kebab-case for ImageCrop', () => {
+    it('should use override icon for ImageCrop', () => {
       const wrapper = mountComponent(createMockNode({ name: 'ImageCrop' }))
       const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-[comfy--image-crop]')
+      expect(icon.classes()).toContain('icon-s1.3-[lucide--crop]')
     })
 
     it('should use kebab-case for complex node names', () => {

src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group relative flex flex-col items-center justify-center py-4 px-2 rounded-2xl cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border aspect-square"
+    class="group relative flex flex-col items-center justify-center py-3 px-2 rounded-lg cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border"
     :data-node-name="node.label"
     draggable="true"
     @click="handleClick"
@@ -9,12 +9,10 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <div class="flex flex-1 items-center justify-center">
-      <i :class="cn(nodeIcon, 'size-14 text-muted-foreground')" />
-    </div>
+    <i :class="cn(nodeIcon, 'size-6 text-muted-foreground')" />
 
     <TextTickerMultiLine
-      class="shrink-0 h-8 w-full text-xs font-bold text-foreground leading-4"
+      class="shrink-0 h-7 w-full text-xs font-normal text-foreground leading-normal mt-2"
     >
       {{ node.label }}
     </TextTickerMultiLine>
@@ -41,6 +39,7 @@ import { computed, inject } from 'vue'
 import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import { ESSENTIALS_ICON_OVERRIDES } from '@/constants/essentialsNodes'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -72,6 +71,8 @@ const {
 
 const nodeIcon = computed(() => {
   const nodeName = node.data?.name
+  if (nodeName && nodeName in ESSENTIALS_ICON_OVERRIDES)
+    return ESSENTIALS_ICON_OVERRIDES[nodeName]
   const iconName = nodeName ? kebabCase(nodeName) : 'node'
   return `icon-[comfy--${iconName}]`
 })

src/constants/essentialsNodes.ts

@@ -6,6 +6,17 @@
  * Source: https://www.notion.so/comfy-org/2fe6d73d365080d0a951d14cdf540778
  */
 
+export const ESSENTIALS_ICON_OVERRIDES: Record<string, string> = {
+  LoadImage: 'icon-s1.3-[lucide--image-up]',
+  LoadImageOutput: 'icon-s1.3-[lucide--image-up]',
+  SaveImage: 'icon-s1.3-[lucide--image-down]',
+  PrimitiveStringMultiline: 'icon-s1.3-[lucide--text]',
+  ImageCrop: 'icon-s1.3-[lucide--crop]',
+  VideoCrop: 'icon-s1.3-[lucide--crop]',
+  KlingLipSyncAudioToVideoNode: 'icon-s1.3-[lucide--mic-vocal]',
+  WebcamCapture: 'icon-s1.3-[lucide--camera]'
+}
+
 export const ESSENTIALS_CATEGORIES = [
   'basics',
   'text generation',