SVG Path Collections

The tables below include some SVG paths that can be used for the navigation buttons in the custom navigation plugin.

Configuration Example

The example below shows how to use these paths in your code:

export default defineConfig({
   integrations: [
     starlight({
       plugins: [
        starlightCustomNavigation({
            buttonIcon: {
                path: 'M4 16L12 8L20 16',
                strokeWidth: 2
            }
        })
       ]
     })
   ]
 });

SVG Path Collections

The following tables contain various SVG paths for different arrow styles. You can use these paths to customize the navigation buttons in your project.

Chevron & Classic Arrow Styles

Icon Name	SVG Path (`d` Value)	Preview
Classic Chevron	`M16 4L8 12L16 20`
Thin Arrow Left	`M14 18L8 12L14 6`
Classic Left Arrow	`M14,20 L4,12 L14,4 M19,12 H4`
Minimalist Arrow	`M4 12L20 12M4 12L10 6M4 12L10 18`
Minimal Arrow	`M14,12 L10,12 M12,10 L10,12 L12,14`
Wide Arrow	`M18,17 L8,12 L18,7 M19,12 H7`
Modern Arrow	`M15,17 L9,12 L15,7 M18,12 H9`
Long Arrow	`M17,12 L7,12 M10,8 L6,12 L10,16`

Double & Multi-Arrow Styles

Icon Name	SVG Path (`d` Value)	Preview
Double Arrow	`M6 12L12 6M6 12L12 18M12 12L18 6M12 12L18 18`
Double Chevron	`M14 18L8 12L14 6M18 18L12 12L18 6`
Offset Chevron	`M14 4L6 12L14 20M18 4L10 12L18 20`
Stepper	`M20 12H13.6M13.6 12L16.8 8.8M13.6 12L16.8 15.2M11.2 12H4.8M4.8 12L8 8.8M4.8 12L8 15.2`
Minimal Double Arrow	`M16,16 L12,12 L16,8 M12,16 L8,12 L12,8`
Feathered Arrow	`M17,12 H9 M11,8 L7,12 L11,16 M14,10 L12,12 L14,14`

Curved, Rounded & Smooth Arrow Styles

Icon Name	SVG Path (`d` Value)	Preview
Rounded Arrow	`M20 12C20 12 12 12 12 12C12 12 14 10 14 8C14 6 12 6 12 6L6 12L12 18C12 18 12 18 12 18C12 18 14 14 14 16C14 18 12 18 12 18`
Rounded Arrow (alt)	`M16,18 Q16,18 10,12 Q10,12 16,6 M18,12 H8`
Curved Wing	`M4 12C4 12 8 8 12 8V6L6 12L12 18V16C8 16 4 12 4 12M20 12H12`
Rounded Chevron	`M15 6C15 6 12 10 12 12C12 14 15 18 15 18L8 12L15 6`
Smooth Arc Arrow	`M16 6C16 6 10 9 10 12C10 15 16 18 16 18L8 12L16 6`
Curved Arrow	`M16,16 C14,15 10,14 8,12 C10,10 14,9 16,8`
Tapered Arrow	`M16,6 C12,8 8,10 8,12 C8,14 12,16 16,18`
Circular Path Arrow	`M14,7 A7,5 0 0 0 14,17 M14,12 H6 M9,9 L6,12 L9,15`

Filled & Block Arrow Styles

Icon Name	SVG Path (`d` Value)	Preview
Filled Arrowhead	`M16 6L10 12L16 18L8 12L16 6Z`
Triangle Head Arrow	`M16 6L8 12L16 18V6Z`
Wide Arrowhead	`M18 6L8 12L18 18L6 12L18 6Z`
Geometric	`M20 4L8 12L20 20L16 12L20 4Z`
Triangle Arrow	`M16,6 L8,12 L16,18 Z`
Thick Arrow	`M17,5 L7,12 L17,19 L17,5 Z`
Block Arrow	`M17,7 H11 V5 L7,12 L11,19 V17 H17 Z`
Angular Arrow	`M16,6 L8,12 L16,18 L13,12 Z`

Special Effect & Decorative Arrow Styles

Icon Name	SVG Path (`d` Value)	Preview
Dashed Line	`M4 12L10 6M4 12L10 18M10 12H12M14 12H16M18 12H20`
Bounce Left	`M4 12H20M4 12L10 6M4 12L10 18`
Sleek Arrow Left	`M15 18L9 12L15 6M9 12H20`
Dot Arrow	`M14,6 L8,12 L14,18 M18,12 H8`

Customizing Stroke Width

You can adjust the thickness of the navigation arrows by modifying the strokeWidth property. Here are some examples:

// Thin stroke
buttonIcon: {
    svgPath: 'M4 16L12 8L20 16',
    strokeWidth: 1
}

// Medium stroke (default)
buttonIcon: {
    svgPath: 'M4 16L12 8L20 16',
    strokeWidth: 2
}

// Thick stroke
buttonIcon: {
    svgPath: 'M4 16L12 8L20 16',
    strokeWidth: 3
}