diff --git a/src/components/Panels/LeftPanel.tsx b/src/components/Panels/LeftPanel.tsx
index c73cbb5..4590e2e 100644
--- a/src/components/Panels/LeftPanel.tsx
+++ b/src/components/Panels/LeftPanel.tsx
@@ -8,6 +8,8 @@ import { usePanelStore } from '../../stores/panelStore';
 import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
 import { useEditorStore } from '../../stores/editorStore';
 import { createNode } from '../../utils/nodeUtils';
+import { getIconComponent } from '../../utils/iconUtils';
+import { getContrastColor } from '../../utils/colorUtils';
 
 /**
  * LeftPanel - Collapsible tools panel on the left side
@@ -107,21 +109,38 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => {
           </button>
           {leftPanelSections.addActors && (
             <div className="px-3 py-3 space-y-2">
-              {nodeTypes.map((nodeType) => (
-                <button
-                  key={nodeType.id}
-                  onClick={() => handleAddNode(nodeType.id)}
-                  className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium text-white rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
-                  style={{ backgroundColor: nodeType.color }}
-                  title={nodeType.description}
-                >
-                  <div
-                    className="w-3 h-3 rounded-full border-2 border-white"
-                    style={{ backgroundColor: nodeType.color }}
-                  />
-                  <span className="flex-1 text-left">{nodeType.label}</span>
-                </button>
-              ))}
+              {nodeTypes.map((nodeType) => {
+                const IconComponent = getIconComponent(nodeType.icon);
+                const textColor = getContrastColor(nodeType.color);
+
+                return (
+                  <button
+                    key={nodeType.id}
+                    onClick={() => handleAddNode(nodeType.id)}
+                    className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
+                    style={{
+                      backgroundColor: nodeType.color,
+                      color: textColor
+                    }}
+                    title={nodeType.description}
+                  >
+                    {IconComponent ? (
+                      <div className="w-5 h-5 flex items-center justify-center" style={{ color: textColor }}>
+                        <IconComponent style={{ fontSize: '1.25rem' }} />
+                      </div>
+                    ) : (
+                      <div
+                        className="w-3 h-3 rounded-full border-2"
+                        style={{
+                          backgroundColor: nodeType.color,
+                          borderColor: textColor
+                        }}
+                      />
+                    )}
+                    <span className="flex-1 text-left">{nodeType.label}</span>
+                  </button>
+                );
+              })}
               <p className="text-xs text-gray-500 pt-2 border-t border-gray-100">
                 Click a button to add an actor to the canvas
               </p>