How do I add an arrowhead to an SVG path?

Pick end, start, or both, then click Add arrow. A triangle is created in defs and marker-end / marker-start is written on every stroked path, polyline, and line.

How is a marker arrowhead different from converting a line to a path?

Line → path rewrites as M/L. This page never changes the element type: it hangs a live marker on the stroke you already have.

Does this bake the arrow into path data?

No. The tip stays a so it scales with stroke-width and follows edits to d. Bake SVG Markers into Path if a CNC/job needs the triangle as real geometry.

Can I put an arrow at the start instead of the end?

Yes. Choose start or both. Remove Markers from SVG clears marker-* without baking. Outline with stroke is a contour around fills, not an arrow.

Add Arrowhead to SVG Path — Free Tool

FAQ

Quick answers

How do I add an arrowhead to an SVG path?: Pick end, start, or both, then click Add arrow. A <marker> triangle is created in defs and marker-end / marker-start is written on every stroked path, polyline, and line.
How is a marker arrowhead different from converting a line to a path?: Line → path rewrites <line x1 y1 x2 y2> as M/L. This page never changes the element type: it hangs a live marker on the stroke you already have.
Does this bake the arrow into path data?: No. The tip stays a <marker> so it scales with stroke-width and follows edits to d. Bake SVG Markers into Path if a CNC/job needs the triangle as real geometry.
Can I put an arrow at the start instead of the end?: Yes. Choose start or both. Remove Markers from SVG clears marker-* without baking. Outline with stroke is a contour around fills, not an arrow.

Bake markers into path → Remove markers → Line → path → Stroke to path →

Privacy Terms

Source

Place

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Add Arrowhead to SVG Path

Live preview