diff --git a/packages/visx-legend/src/shapes/Rect.tsx b/packages/visx-legend/src/shapes/Rect.tsx
index 151c5c5e7e..eeb8ae78a9 100644
--- a/packages/visx-legend/src/shapes/Rect.tsx
+++ b/packages/visx-legend/src/shapes/Rect.tsx
@@ -12,14 +12,11 @@ export type ShapeRectProps = {
 };
 
 export default function ShapeRect({ fill, width, height, style }: ShapeRectProps) {
+  const cleanWidth = typeof width === 'string' || typeof width === 'undefined' ? 15 : width;
+  const cleanHeight = typeof height === 'string' || typeof height === 'undefined' ? 15 : height;
   return (
-    <div
-      style={{
-        width,
-        height,
-        background: fill,
-        ...style,
-      }}
-    />
+    <svg width={cleanWidth} height={cleanHeight}>
+      <rect width={cleanWidth} height={cleanHeight} fill={fill} style={style} />
+    </svg>
   );
 }
diff --git a/packages/visx-legend/test/LegendThreshold.test.tsx b/packages/visx-legend/test/LegendThreshold.test.tsx
index f0e8dae290..77524077ef 100644
--- a/packages/visx-legend/test/LegendThreshold.test.tsx
+++ b/packages/visx-legend/test/LegendThreshold.test.tsx
@@ -32,7 +32,9 @@ describe('<LegendThreshold />', () => {
     range.forEach((color, index) => {
       const legendItem = thresholdLegend[index];
       const legendShape = legendItem?.querySelector('.visx-legend-shape');
-      expect(legendShape?.querySelector('div')).toHaveStyle(`background: ${color}`);
+      const rectEl = legendShape?.querySelector('rect');
+      expect(rectEl).not.toBeNull();
+      expect(rectEl).toHaveAttribute('fill', color);
     });
   });
 
@@ -55,7 +57,9 @@ describe('<LegendThreshold />', () => {
     range.forEach((color, index) => {
       const legendItem = thresholdLegend[index];
       const legendShape = legendItem?.querySelector('.visx-legend-shape');
-      expect(legendShape?.querySelector('div')).toHaveStyle(`background: ${color}`);
+      const rectEl = legendShape?.querySelector('rect');
+      expect(rectEl).not.toBeNull();
+      expect(rectEl).toHaveAttribute('fill', color);
     });
   });
 
@@ -78,7 +82,9 @@ describe('<LegendThreshold />', () => {
     range.forEach((color, index) => {
       const legendItem = thresholdLegend[index];
       const legendShape = legendItem?.querySelector('.visx-legend-shape');
-      expect(legendShape?.querySelector('div')).toHaveStyle(`background: ${color}`);
+      const rectEl = legendShape?.querySelector('rect');
+      expect(rectEl).not.toBeNull();
+      expect(rectEl).toHaveAttribute('fill', color);
     });
   });
 });