diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 6ec6a70d..ab22159f 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -149,7 +149,9 @@
 			label: 'Explicit Prop Blue Color (should override CSS)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: '#0000ff'
+				color: '#0000ff',
+				width: 40,
+				height: 40
 			}
 		},
 		{
@@ -159,7 +161,9 @@
 			label: 'Marker No Prop Color (should use CSS variable)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: null
+				color: undefined,
+				width: 40,
+				height: 40
 			}
 		}
 	]);
diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 90ef1228..3321d4cd 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -8,7 +8,7 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color !== 'none' && { stroke: color, fill: color }),
+    ...(color && color !== 'none' && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
@@ -17,7 +17,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color !== 'none' && { stroke: color, fill: color }),
+    ...(color && color !== 'none' && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;