Change SVG hamburger icon on desktop

Hi there,

see Leos reply here:

https://generatepress.com/forums/topic/how-to-replace-mobile-menu-icon-with-а-custom-icon/#post-2091106

Sorry David, I don't understand. You point me to filter that I'm allready using.That filter works for menu icon at mobile but not for desktop/tablet...

Hi there,

You can modify it a bit to apply to desktop and tablet as well.

Try this one:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<img src="https://URL-TO-THE-IMAGE">';
    }
    if ( 'pro-menu-bar' === $icon ) {
        $output = '<img src="https://URL-TO-THE-IMAGE">';
    }

    return $output;
}, 10, 2 );

Hi Elvin, no change. My filter looks like this:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
    }
	if ( 'pro-menu-bar' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
    }
    return $output;
}, 10, 2 );

Ah I see.

Let's change the filter used for pro-menu-bars.

Since the one for mobile is already working, let's revert to the one you use for it and let's have a separate filter for the desktop.

Try adding this one:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
	if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
    }
	
	$classes = array(
		'gp-icon',
		'icon-' . $icon,
	);

	$output = sprintf(
		'<span class="%1$s">%2$s</span>',
		implode( ' ', $classes ),
		$output
	);
	return $output;
}, 10, 2 );

Hi Elvin, that works. But why so difficult way for such a common requirement ?
Thanx Radek

Is "close" for cross icon on Off Canvas menu too ? I add the different svg to working mobile menu icon filter and there is still original cross icon at Off Canvas menu...

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
	}
	if ( 'close' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="113.39" height="113.39" viewBox="0 0 113.39 113.39" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M87.317 71.085c-2.374-1.44-4.763-5.832-12.3-10.993 6.551-6.54 13.23-13.224 19.088-19.101 3.171-3.183 4.875-4.523 9.547-10.793 2.616-3.509 6.596-6.886 7.474-9.547 1.25-3.789.621-7.661-2.7-11.831-4.732-5.949-13.721-6.199-18.678.415-5.924 7.903-13.793 15.452-21.794 23.455-3.518 3.518-7.036 7.098-10.555 10.666-3.519-3.567-7.038-7.148-10.556-10.666-8.001-8.003-15.87-15.552-21.794-23.455C20.093 2.62 11.104 2.87 6.372 8.819c-3.321 4.17-3.95 8.041-2.7 11.83.878 2.662 4.857 6.039 7.474 9.548 4.672 6.271 6.376 7.61 9.547 10.794 5.857 5.877 12.537 12.561 19.088 19.101-7.538 5.161-9.925 9.553-12.3 10.993-7.494 4.544-13.447 12.003-21.793 19.303-2.214 2.409-2.931 5.878-2.49 8.718 1.113 7.168 9.613 12.323 15.359 10.792 5.573-1.485 12.337-11.476 19.718-16.396 4.361-2.91 9.583-9.178 14.735-12.662 1.477-.998 2.937-2.155 4.389-3.409 1.453 1.254 2.912 2.411 4.389 3.409 5.152 3.484 10.374 9.752 14.735 12.662 7.381 4.92 14.145 14.91 19.718 16.396 5.746 1.531 14.246-3.624 15.359-10.792.44-2.84-.276-6.309-2.49-8.718-8.345-7.3-14.298-14.759-21.793-19.303z"/></svg>';
	}
    return $output;
}, 10, 2 );

Hi Elvin, that works. But why so difficult way for such a common requirement ?
Thanx Radek

It's usually a combination of misspellings or wrong $icon handle name reference.
Example: instead of 'close' perhaps the one needed to be changed is 'pro-close'.

Another reason would where the icon is coming from.

Some icons are coming from the base theme while others were coming from the plugin. For this one, we may have to check a bit deeper any potential bugs on the interaction between filters.

For now, if it doesn't work for generate_svg_icon_element filter, we can try using generate_svg_icon filter.

Like this one:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
	if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
    }
	if ( 'pro-close' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="113.39" height="113.39" viewBox="0 0 113.39 113.39" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M87.317 71.085c-2.374-1.44-4.763-5.832-12.3-10.993 6.551-6.54 13.23-13.224 19.088-19.101 3.171-3.183 4.875-4.523 9.547-10.793 2.616-3.509 6.596-6.886 7.474-9.547 1.25-3.789.621-7.661-2.7-11.831-4.732-5.949-13.721-6.199-18.678.415-5.924 7.903-13.793 15.452-21.794 23.455-3.518 3.518-7.036 7.098-10.555 10.666-3.519-3.567-7.038-7.148-10.556-10.666-8.001-8.003-15.87-15.552-21.794-23.455C20.093 2.62 11.104 2.87 6.372 8.819c-3.321 4.17-3.95 8.041-2.7 11.83.878 2.662 4.857 6.039 7.474 9.548 4.672 6.271 6.376 7.61 9.547 10.794 5.857 5.877 12.537 12.561 19.088 19.101-7.538 5.161-9.925 9.553-12.3 10.993-7.494 4.544-13.447 12.003-21.793 19.303-2.214 2.409-2.931 5.878-2.49 8.718 1.113 7.168 9.613 12.323 15.359 10.792 5.573-1.485 12.337-11.476 19.718-16.396 4.361-2.91 9.583-9.178 14.735-12.662 1.477-.998 2.937-2.155 4.389-3.409 1.453 1.254 2.912 2.411 4.389 3.409 5.152 3.484 10.374 9.752 14.735 12.662 7.381 4.92 14.145 14.91 19.718 16.396 5.746 1.531 14.246-3.624 15.359-10.792.44-2.84-.276-6.309-2.49-8.718-8.345-7.3-14.298-14.759-21.793-19.303z"/></svg>';
	}
	
	$classes = array(
		'gp-icon',
		'icon-' . $icon,
	);

	$output = sprintf(
		'<span class="%1$s">%2$s</span>',
		implode( ' ', $classes ),
		$output
	);
	return $output;
}, 10, 2 );

So I turned off 2 filters we made before and used only this one. We are close, the close icon works everywhere, menu icon works on desktop+tablet and does not work at mobile...

So I turned off 2 filters we made before and used only this one. We are close, the close icon works everywhere, menu icon works on desktop+tablet and does not work at mobile…

Actually, we can merge them into one. We can just use the generate_svg_icon to make things cleaner as it's the main function that's being used by both the theme and GP premium.

Example:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
	if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
    }
	if ( 'pro-close' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="113.39" height="113.39" viewBox="0 0 113.39 113.39" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M87.317 71.085c-2.374-1.44-4.763-5.832-12.3-10.993 6.551-6.54 13.23-13.224 19.088-19.101 3.171-3.183 4.875-4.523 9.547-10.793 2.616-3.509 6.596-6.886 7.474-9.547 1.25-3.789.621-7.661-2.7-11.831-4.732-5.949-13.721-6.199-18.678.415-5.924 7.903-13.793 15.452-21.794 23.455-3.518 3.518-7.036 7.098-10.555 10.666-3.519-3.567-7.038-7.148-10.556-10.666-8.001-8.003-15.87-15.552-21.794-23.455C20.093 2.62 11.104 2.87 6.372 8.819c-3.321 4.17-3.95 8.041-2.7 11.83.878 2.662 4.857 6.039 7.474 9.548 4.672 6.271 6.376 7.61 9.547 10.794 5.857 5.877 12.537 12.561 19.088 19.101-7.538 5.161-9.925 9.553-12.3 10.993-7.494 4.544-13.447 12.003-21.793 19.303-2.214 2.409-2.931 5.878-2.49 8.718 1.113 7.168 9.613 12.323 15.359 10.792 5.573-1.485 12.337-11.476 19.718-16.396 4.361-2.91 9.583-9.178 14.735-12.662 1.477-.998 2.937-2.155 4.389-3.409 1.453 1.254 2.912 2.411 4.389 3.409 5.152 3.484 10.374 9.752 14.735 12.662 7.381 4.92 14.145 14.91 19.718 16.396 5.746 1.531 14.246-3.624 15.359-10.792.44-2.84-.276-6.309-2.49-8.718-8.345-7.3-14.298-14.759-21.793-19.303z"/></svg>';
	}

    if ( 'menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="141.73" height="116.22" viewBox="0 0 141.73 116.22" xml:space="preserve"><g fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"><path d="M10.599.821c11.063.739 20.546-.326 29.06 1.762 2.949.722 8.387-1.051 19.079 1.468 11.961.268 24.462 0 36.69 0 11.317-.001 22.22.226 31.996-1.174 8.182-1.172 14.36 5.361 13.501 12.915-.601 5.296-2.894 8.479-6.457 10.274-2.503 1.261-7.704.835-12.035 1.467-7.738 1.13-9.891.873-14.383.881-10.688.019-23.295.019-34.928 0-7.838-.013-15.743.388-22.309-.881-6.108-1.18-14.232-.44-19.373-1.467-8.698-1.74-20.545.542-25.537-2.349-5.146-2.98-7.511-12.635-3.229-18.491C4.37 2.906 7.33.959 10.599.821zM29.091 45.438c6.644-.292 16.622-.773 24.657.292 2.144.285 4.904.524 7.044.587 2.271.067 4.814-.113 7.044 0 5.556.282 10.791-.089 17.024 1.468 2.903.725 5.697.269 7.34.294 1.188.016 3.844-.229 6.749-.881 3.282-.738 6.49-.496 8.806.293 4.395 1.498 9.085 5.935 7.633 12.915-1.873 8.995-7.44 11.438-20.253 12.035-9.492.442-15.438-1.024-22.015-1.761-4.973-.558-15.327.544-22.309-.882-3.813-.778-12.269-.264-13.796-.293-4.967-.097-9.057 1.543-13.796-.88-5.227-2.673-7.524-11.957-3.228-18.199 2.322-3.372 5.137-4.869 9.1-4.988zM80.751 88.586c10.555-1.235 16.072 10.268 9.395 19.374-5.879 8.012-23.233 5.865-36.985 5.87-4.83.001-10.742 1.044-12.915.293-2.874-.993-5.319-3.638-6.458-6.457-1.381-3.423-.33-8.407.88-10.86 4.763-9.666 17.378-7.341 31.115-7.339 5.572 0 7.291.174 9.979-.293.753-.133 4.154-.426 4.989-.588z"/></g></svg>';
	}
	if ( 'close' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="113.39" height="113.39" viewBox="0 0 113.39 113.39" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M87.317 71.085c-2.374-1.44-4.763-5.832-12.3-10.993 6.551-6.54 13.23-13.224 19.088-19.101 3.171-3.183 4.875-4.523 9.547-10.793 2.616-3.509 6.596-6.886 7.474-9.547 1.25-3.789.621-7.661-2.7-11.831-4.732-5.949-13.721-6.199-18.678.415-5.924 7.903-13.793 15.452-21.794 23.455-3.518 3.518-7.036 7.098-10.555 10.666-3.519-3.567-7.038-7.148-10.556-10.666-8.001-8.003-15.87-15.552-21.794-23.455C20.093 2.62 11.104 2.87 6.372 8.819c-3.321 4.17-3.95 8.041-2.7 11.83.878 2.662 4.857 6.039 7.474 9.548 4.672 6.271 6.376 7.61 9.547 10.794 5.857 5.877 12.537 12.561 19.088 19.101-7.538 5.161-9.925 9.553-12.3 10.993-7.494 4.544-13.447 12.003-21.793 19.303-2.214 2.409-2.931 5.878-2.49 8.718 1.113 7.168 9.613 12.323 15.359 10.792 5.573-1.485 12.337-11.476 19.718-16.396 4.361-2.91 9.583-9.178 14.735-12.662 1.477-.998 2.937-2.155 4.389-3.409 1.453 1.254 2.912 2.411 4.389 3.409 5.152 3.484 10.374 9.752 14.735 12.662 7.381 4.92 14.145 14.91 19.718 16.396 5.746 1.531 14.246-3.624 15.359-10.792.44-2.84-.276-6.309-2.49-8.718-8.345-7.3-14.298-14.759-21.793-19.303z"/></svg>';
	}
	
	$classes = array(
		'gp-icon',
		'icon-' . $icon,
	);

	$output = sprintf(
		'<span class="%1$s">%2$s</span>',
		implode( ' ', $classes ),
		$output
	);
	return $output;
}, 10, 2 );

To identify how to add a new icon, you can inspect the page to check the element icon's handle name.

Example: If you want to change the shopping cart icon.

Inspect the page to see what's the icon handle by checking the class holding the SVG icon.
https://share.getcloudapp.com/OAu46D6K

On this screenshot, there's a shopping-cart class.

You can use that handle to modify the icon on the generate_svg_icon filter.

Adding an entry for modification would be:

	if ( 'shopping-cart' === $icon ) {
        $output = 'your SVG here';
	}

Works good, sorry my fault with last comment...
Thank You very much.

No problem. Let us know if you need further help. :D