tomLadder · phanex · Aug 29, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 node_modules/
 dist/
+.yarn/
+package-lock.json
 bun.lockb
 *.tsbuildinfo
 

diff --git a/README.md b/README.md
@@ -41,7 +41,8 @@
 ## Features
 
 **Web Editor** — [try it now](https://tomladder.github.io/thermoprint/)
-- Drag & drop label designer with text, images, QR codes, barcodes, and shapes
+- Drag & drop label designer with text, images, icons, QR codes, barcodes, and shapes
+- Iconify icon browser (`C` shortcut) supporting 200+ sets (>200,000 vector icons)
 - Resize, rotate, and align elements visually on a Konva.js canvas
 - Live-preview with gap/continuous paper simulation and ghost labels
 - Print directly from the browser via Web Bluetooth (Chrome/Edge)

diff --git a/bun.lock b/bun.lock
diff --git a/packages/web/src/editor/canvas/elements/element-wrapper.tsx b/packages/web/src/editor/canvas/elements/element-wrapper.tsx
@@ -15,9 +15,10 @@ const ACCENT_MAP: Record<string, { accent: string; accent600: string }> = {
 interface Props {
   nodeRef: React.RefObject<Konva.Node | null>;
   isSelected: boolean;
+  deps?: unknown[];
 }
 
-export function ElementWrapper({ nodeRef, isSelected }: Props) {
+export function ElementWrapper({ nodeRef, isSelected, deps = [] }: Props) {
   const trRef = useRef<Konva.Transformer>(null);
   const theme = useEditorV2Store((s) => s.theme);
   const { accent, accent600 } = ACCENT_MAP[theme] || ACCENT_MAP.cyan;
@@ -27,7 +28,7 @@ export function ElementWrapper({ nodeRef, isSelected }: Props) {
       trRef.current.nodes([nodeRef.current]);
       trRef.current.getLayer()?.batchDraw();
     }
-  }, [isSelected, nodeRef, accent]);
+  }, [isSelected, nodeRef, accent, nodeRef.current, ...deps]);
 
   if (!isSelected) return null;
 

diff --git a/packages/web/src/editor/canvas/elements/image-element.tsx b/packages/web/src/editor/canvas/elements/image-element.tsx
@@ -23,7 +23,12 @@ export function ImageElement({ element, isSelected }: Props) {
     if (!p.src) return;
     const img = new window.Image();
     img.src = p.src;
-    img.onload = () => setImage(img);
+    img.onload = () => {
+      setImage(img);
+      if (ref.current) {
+        ref.current.getLayer()?.batchDraw();
+      }
+    };
   }, [p.src]);
 
   if (!image) {
@@ -61,7 +66,11 @@ export function ImageElement({ element, isSelected }: Props) {
             listening={false}
           />
         </Group>
-        <ElementWrapper nodeRef={ref} isSelected={isSelected} />
+        <ElementWrapper
+          nodeRef={ref}
+          isSelected={isSelected}
+          deps={[image, element.width, element.height, p.src]}
+        />
       </>
     );
   }
@@ -99,7 +108,11 @@ export function ImageElement({ element, isSelected }: Props) {
           });
         }}
       />
-      <ElementWrapper nodeRef={ref} isSelected={isSelected} />
+      <ElementWrapper
+        nodeRef={ref}
+        isSelected={isSelected}
+        deps={[image, element.width, element.height, p.src]}
+      />
     </>
   );
 }
diff --git a/packages/web/src/editor/canvas/elements/text-element.tsx b/packages/web/src/editor/canvas/elements/text-element.tsx
@@ -27,6 +27,7 @@ export function TextElement({ element, isSelected }: Props) {
     fill?: string;
     align?: string;
     italic?: boolean;
+    uppercase?: boolean;
   };
 
   const fontStyle =
@@ -154,7 +155,7 @@ export function TextElement({ element, isSelected }: Props) {
         y={element.y}
         width={element.width}
         rotation={element.rotation}
-        text={p.text || "Text"}
+        text={p.uppercase ? (p.text || "Text").toUpperCase() : (p.text || "Text")}
         fontSize={p.fontSize || 18}
         fontFamily={p.fontFamily || "Inter"}
         fontStyle={fontStyle}
@@ -189,7 +190,22 @@ export function TextElement({ element, isSelected }: Props) {
           });
         }}
       />
-      {!isEditing && <ElementWrapper nodeRef={ref} isSelected={isSelected} />}
+      {!isEditing && (
+        <ElementWrapper
+          nodeRef={ref}
+          isSelected={isSelected}
+          deps={[
+            p.fontFamily,
+            p.fontSize,
+            p.letterSpacing,
+            p.text,
+            fontStyle,
+            p.uppercase,
+            element.width,
+            element.height,
+          ]}
+        />
+      )}
     </>
   );
 }
diff --git a/packages/web/src/editor/dock/dock.tsx b/packages/web/src/editor/dock/dock.tsx
@@ -4,6 +4,7 @@ import {
   QrCode,
   Barcode,
   ImageIcon,
+  Sticker,
   Square,
   Minus,
   Layers,
@@ -15,6 +16,7 @@ import { DockBtn } from "./dock-btn.tsx";
 import { DockGroup } from "./dock-group.tsx";
 import { DockDivider } from "./dock-divider.tsx";
 import { Kbd } from "./kbd.tsx";
+import { useEditorV2Store } from "../../store/editor-store.ts";
 import {
   addTextEl,
   addQrEl,
@@ -26,19 +28,33 @@ import {
 import { LayersFlyout } from "./flyouts/layers-flyout.tsx";
 import { LibraryFlyout } from "./flyouts/library-flyout.tsx";
 import { PrintSettingsFlyout } from "./flyouts/print-settings-flyout.tsx";
+import { IconsFlyout } from "./flyouts/icons-flyout.tsx";
 
-type FlyoutKey = "layers" | "library" | "print" | "more-tools" | null;
+type FlyoutKey = "layers" | "library" | "print" | "icons" | "more-tools" | null;
+
+interface ReplaceIconDetail {
+  initialPrefix?: string | null;
+  targetElementId?: string | null;
+}
 
 export function Dock() {
   const [openFlyout, setOpenFlyout] = useState<FlyoutKey>(null);
+  const [replaceDetail, setReplaceDetail] = useState<ReplaceIconDetail | null>(
+    null
+  );
 
-  const toggle = (key: Exclude<FlyoutKey, null>) =>
+  const toggle = (key: Exclude<FlyoutKey, null>) => {
+    setReplaceDetail(null);
     setOpenFlyout((cur) => (cur === key ? null : key));
+  };
 
   // Close flyout on Escape
   useEffect(() => {
     const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpenFlyout(null);
+      if (e.key === "Escape") {
+        setOpenFlyout(null);
+        setReplaceDetail(null);
+      }
     };
     window.addEventListener("keydown", h);
     return () => window.removeEventListener("keydown", h);
@@ -51,12 +67,27 @@ export function Dock() {
     return () => window.removeEventListener("thermoprint:open-library", h);
   }, []);
 
+  // Listen for "open icons" & "replace icon" events
+  useEffect(() => {
+    const handleOpenIcons = (e: Event) => {
+      const customEvent = e as CustomEvent<ReplaceIconDetail>;
+      setReplaceDetail(customEvent.detail || null);
+      setOpenFlyout("icons");
+    };
+    window.addEventListener("thermoprint:open-icons", handleOpenIcons);
+    return () =>
+      window.removeEventListener("thermoprint:open-icons", handleOpenIcons);
+  }, []);
+
   return (
     <>
       {openFlyout && (
         <div
           className="fixed inset-0 z-20"
-          onClick={() => setOpenFlyout(null)}
+          onClick={() => {
+            setOpenFlyout(null);
+            setReplaceDetail(null);
+          }}
         />
       )}
       {openFlyout === "layers" && (
@@ -68,6 +99,16 @@ export function Dock() {
       {openFlyout === "print" && (
         <PrintSettingsFlyout onClose={() => setOpenFlyout(null)} />
       )}
+      {openFlyout === "icons" && (
+        <IconsFlyout
+          onClose={() => {
+            setOpenFlyout(null);
+            setReplaceDetail(null);
+          }}
+          initialPrefix={replaceDetail?.initialPrefix}
+          targetElementId={replaceDetail?.targetElementId}
+        />
+      )}
       {openFlyout === "more-tools" && (
         <div className="fixed inset-x-2 bottom-20 md:hidden bg-ink-850/95 backdrop-blur-sm border border-white/8 rounded-lg shadow-panel z-40 overflow-hidden">
           <div className="grid grid-cols-4 gap-1 p-2">
@@ -76,12 +117,16 @@ export function Dock() {
               { icon: QrCode, label: "QR Code", fn: addQrEl },
               { icon: Barcode, label: "Barcode", fn: addBarcodeEl },
               { icon: ImageIcon, label: "Image", fn: addImageEl },
+              { icon: Sticker, label: "Icons", fn: () => setOpenFlyout("icons") },
               { icon: Square, label: "Rectangle", fn: addRectEl },
               { icon: Minus, label: "Line", fn: addLineEl },
             ].map((t) => (
               <button
                 key={t.label}
-                onClick={() => { t.fn(); setOpenFlyout(null); }}
+                onClick={() => {
+                  t.fn();
+                  if (t.label !== "Icons") setOpenFlyout(null);
+                }}
                 className="flex flex-col items-center gap-1 py-3 rounded-lg text-ink-200 hover:bg-ink-800 hover:text-ink-50 hover-fade"
               >
                 <t.icon size={20} />
@@ -111,17 +156,30 @@ export function Dock() {
                 <DockBtn icon={QrCode} label="QR" shortcut="Q" onClick={addQrEl} />
                 <DockBtn icon={Barcode} label="Barcode" shortcut="B" onClick={addBarcodeEl} />
                 <DockBtn icon={ImageIcon} label="Image" shortcut="I" onClick={addImageEl} />
+                <DockBtn
+                  icon={Sticker}
+                  label="Icons"
+                  shortcut="C"
+                  onClick={() => toggle("icons")}
+                  active={openFlyout === "icons"}
+                />
                 <DockBtn icon={Square} label="Rect" shortcut="R" onClick={addRectEl} />
                 <DockBtn icon={Minus} label="Line" shortcut="L" onClick={addLineEl} />
               </DockGroup>
               <DockDivider />
             </div>
 
-            {/* Mobile: Text + Image + More */}
+            {/* Mobile: Text + Image + Icons + More */}
             <div className="md:hidden contents">
               <DockGroup label="Add">
                 <DockBtn icon={Type} label="Text" onClick={addTextEl} />
                 <DockBtn icon={ImageIcon} label="Image" onClick={addImageEl} />
+                <DockBtn
+                  icon={Sticker}
+                  label="Icons"
+                  onClick={() => toggle("icons")}
+                  active={openFlyout === "icons"}
+                />
                 <DockBtn
                   icon={MoreHorizontal}
                   label="More"
@@ -165,9 +223,13 @@ export function Dock() {
             <Kbd>⌘</Kbd>+<Kbd>scroll</Kbd> zoom
           </span>
           <span className="text-ink-700">•</span>
-          <span>
+          <button
+            onClick={() => useEditorV2Store.setState({ paletteOpen: true })}
+            className="hover:text-accent hover-fade flex items-center gap-1 cursor-pointer outline-none"
+            title="Click or press ⌘K to open Command Palette"
+          >
             <Kbd>⌘K</Kbd> commands
-          </span>
+          </button>
         </div>
       </div>
     </>