diff --git a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
index 18cd34c3e..a45ea9bbd 100644
--- a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
+++ b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
@@ -171,6 +171,7 @@ const CartesianMarkersItem = ({
     lineStyle,
     textStyle,
     legend,
+    legendNode,
     legendPosition = 'top-right',
     legendOffsetX = 14,
     legendOffsetY = 14,
@@ -191,8 +192,7 @@ const CartesianMarkersItem = ({
         y2 = height
     }
 
-    let legendNode = null
-    if (legend) {
+    if (legend && !legendNode) {
         const legendProps = computeLabel({
             axis,
             width,
diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
index b6c133d7a..49af2d27b 100644
--- a/packages/line/tests/Line.test.js
+++ b/packages/line/tests/Line.test.js
@@ -292,6 +292,43 @@ it('should call the custom label callback for each point', () => {
     }
 })
 
+it('should display a custom legendNode for marker', () => {
+    const data = [
+        {
+            id: 'A',
+            data: [
+                { x: 0, y: 3 },
+                { x: 1, y: 7 },
+                { x: 2, y: 11 },
+                { x: 3, y: 9 },
+                { x: 4, y: 8 },
+            ],
+        },
+    ]
+    const markers = [
+        {
+            axis: 'x',
+            lineStyle: {
+                stroke: 'lightblue',
+                strokeWidth: 5,
+            },
+            legendPosition: 'top',
+            legendNode: (
+                <foreignObject x={0} y={0} width={32} height={32}>
+                    <div>😎</div>
+                </foreignObject>
+            ),
+        },
+    ]
+
+    const component = renderer.create(
+        <Line width={500} height={300} data={data} animate={false} markers={markers} />
+    )
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+})
+
 describe('curve interpolation', () => {
     const curveInterpolations = [
         'basis',
diff --git a/packages/line/tests/__snapshots__/Line.test.js.snap b/packages/line/tests/__snapshots__/Line.test.js.snap
index 0ee2a68da..d97ab407a 100644
--- a/packages/line/tests/__snapshots__/Line.test.js.snap
+++ b/packages/line/tests/__snapshots__/Line.test.js.snap
@@ -7620,6 +7620,953 @@ exports[`curve interpolation should support stepBefore curve interpolation 1`] =
 </div>
 `;
 
+exports[`should display a custom legendNode for marker 1`] = `
+<div
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <svg
+    height={300}
+    role="img"
+    width={500}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      fill="transparent"
+      height={300}
+      width={500}
+    />
+    <g
+      transform="translate(0,0)"
+    >
+      <g>
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={125}
+          x2={125}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={250}
+          x2={250}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={375}
+          x2={375}
+          y1={0}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={500}
+          x2={500}
+          y1={0}
+          y2={300}
+        />
+      </g>
+      <g>
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={300}
+          y2={300}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={273}
+          y2={273}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={245}
+          y2={245}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={218}
+          y2={218}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={191}
+          y2={191}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={164}
+          y2={164}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={136}
+          y2={136}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={109}
+          y2={109}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={82}
+          y2={82}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={55}
+          y2={55}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={27}
+          y2={27}
+        />
+        <line
+          opacity={1}
+          stroke="#dddddd"
+          strokeWidth={1}
+          x1={0}
+          x2={500}
+          y1={0}
+          y2={0}
+        />
+      </g>
+      <g
+        transform="translate(undefined, 0)"
+      >
+        <line
+          stroke="#000000"
+          strokeWidth={1}
+          style={
+            {
+              "stroke": "lightblue",
+              "strokeWidth": 5,
+            }
+          }
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+        <foreignObject
+          height={32}
+          width={32}
+          x={0}
+          y={0}
+        >
+          <div>
+            😎
+          </div>
+        </foreignObject>
+      </g>
+      <g
+        transform="translate(0,300)"
+      >
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            0
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(125,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            1
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(250,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            2
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(375,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            3
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(500,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={0}
+            y1={0}
+            y2={5}
+          />
+          <text
+            dominantBaseline="text-before-edge"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="middle"
+            transform="translate(0,10) rotate(0)"
+          >
+            4
+          </text>
+        </g>
+        <line
+          style={
+            {
+              "stroke": "transparent",
+              "strokeWidth": 1,
+            }
+          }
+          x1={0}
+          x2={500}
+          y1={0}
+          y2={0}
+        />
+      </g>
+      <g
+        transform="translate(0,0)"
+      >
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,300)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            0
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,273)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            1
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,245)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            2
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,218)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            3
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,191)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            4
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,164)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            5
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,136)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            6
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,109)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            7
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,82)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            8
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,55)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            9
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,27)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            10
+          </text>
+        </g>
+        <g
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+          transform="translate(0,0)"
+        >
+          <line
+            style={
+              {
+                "stroke": "#777777",
+                "strokeWidth": 1,
+              }
+            }
+            x1={0}
+            x2={-5}
+            y1={0}
+            y2={0}
+          />
+          <text
+            dominantBaseline="central"
+            style={
+              {
+                "fill": "#333333",
+                "fontFamily": "sans-serif",
+                "fontSize": 11,
+              }
+            }
+            textAnchor="end"
+            transform="translate(-10,0) rotate(0)"
+          >
+            11
+          </text>
+        </g>
+        <line
+          style={
+            {
+              "stroke": "transparent",
+              "strokeWidth": 1,
+            }
+          }
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={300}
+        />
+      </g>
+      <path
+        d="M0,218L125,109L250,0L375,55L500,82"
+        fill="none"
+        stroke="#e8c1a0"
+        strokeWidth={2}
+      />
+      <g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(500, 82)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(375, 55)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(250, 0)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(125, 109)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+        <g
+          style={
+            {
+              "pointerEvents": "none",
+            }
+          }
+          transform="translate(0, 218)"
+        >
+          <circle
+            fill="#e8c1a0"
+            r={3}
+            stroke="transparent"
+            strokeWidth={0}
+            style={
+              {
+                "pointerEvents": "none",
+              }
+            }
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
+
 exports[`should render a basic line chart 1`] = `
 <div
   style={