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 fixedwidthandheight: 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.