Create an Arrow Icon with SVG Path Lines
Build a clean arrow icon using moveto, lineto, and close commands. Learn how to create directional indicators for navigation and UI elements.
Detailed Explanation
Arrow Icon with Line Commands
An arrow is a fundamental UI element built entirely with straight lines. The path uses only M, L, and Z commands.
The Path
M 10,50 L 60,50 L 60,30 L 90,55 L 60,80 L 60,60 L 10,60 Z
Breakdown
| Command | Description |
|---|---|
M 10,50 |
Start at the left of the shaft (top edge) |
L 60,50 |
Draw the top edge of the shaft rightward |
L 60,30 |
Go up to the arrowhead wing (top) |
L 90,55 |
Draw to the arrowhead tip |
L 60,80 |
Draw down to the arrowhead wing (bottom) |
L 60,60 |
Return to the shaft bottom edge |
L 10,60 |
Draw the bottom edge of the shaft leftward |
Z |
Close back to the start |
Variations
Thin arrow (no shaft):
M 10,50 L 70,10 L 70,35 L 90,35 L 90,65 L 70,65 L 70,90 Z
Chevron (open arrow):
M 30,10 L 70,50 L 30,90
Double arrow:
M 10,50 L 40,20 L 40,40 L 60,40 L 60,20 L 90,50
L 60,80 L 60,60 L 40,60 L 40,80 Z
Sizing and Direction
Rotate the arrow by transforming coordinates or using a CSS/SVG transform="rotate(...)". To point left, flip x-coordinates. To point up, swap x and y in the path or apply rotate(-90).
Stroke vs. Fill
For a filled arrow, use the path as-is with a fill color. For a stroked outline arrow (like a chevron), omit Z and set fill="none" with a stroke color and width.
Use Case
Arrow icons are ubiquitous in navigation buttons, breadcrumbs, carousel controls, dropdown triggers, back/forward links, and flow diagrams. Path-based arrows scale perfectly at any size.