# Custom SVG arrows for your sliders

URL: https://gutenslider.org/adding-custom-arrows-to-your-wordpress-sliders/
Published: 2021-10-24
Updated: 2026-10-12

> Prepare an SVG, register it with the gutenslider_arrows filter and pick it in the block settings, step by step.

Gutenslider can use your own SVG arrows, in the free plugin as well as in Pro. You prepare two SVGs, register them with a small PHP filter, and pick them in the arrow style menu like the built-in ones. Plan 15 to 30 minutes.

### 1. Prepare the SVG

You need a “previous” and a “next” arrow; often it is one drawing, mirrored. In your vector editor (Illustrator, Figma, Inkscape):

- Delete hidden layers, clipping paths and anything you do not see.
- Crop the artboard to the drawing, so there is no empty space around it (Illustrator: Object → Artboards → Fit to Artwork Bounds).
- Export as SVG and copy the code.

### 2. Clean up the code

- Keep the `viewBox`, remove fixed `width` and `height`: the arrow size setting controls the size.
- Replace fill and stroke colors with `currentColor`, so the arrow color settings apply.
- Remove `<style>` blocks, IDs and comments the editor added.

A clean arrow looks like this:

```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
	<path fill="currentColor" d="M15.4 5.4 14 4l-8 8 8 8 1.4-1.4L8.8 12z"/>
</svg>
```

### 3. Register the arrows

Gutenslider has the filter `gutenslider_arrows`. Add this to your theme’s `functions.php` or a small plugin:

```
add_filter( 'gutenslider_arrows', function ( $arrows ) {
	$arrows[] = array(
		'value' => 'my-arrow',   // a unique ID, saved with the slider
		'label' => 'My arrow',   // shown in the arrow style menu
		'prev'  => '<svg …>…</svg>',
		'next'  => '<svg …>…</svg>',
	);
	return $arrows;
} );
```

### 4. Use them

Reload the editor, select a slider and open the arrow settings. “My arrow” is now in the style menu. Size, colors, position and “follow the mouse” work with it like with the built-in styles.

Keep the `value` unchanged once sliders use it: sliders store the value, not the SVG.