Change SVG icon color inside button on hover


Sun Mar 20 2022 17:28:54 GMT+0000 (UTC)

Saved by @max_demydenko #js #svg #hover

const handleButtonWithSvgHover = (buttonId, svgWrapperId, svgFillColorNew, svgFillColorOld) => {
	const button = $(`#${buttonId}`);
	const svgWrapper = $(`#${svgWrapperId}`);
	const svgPath = svgWrapper[0].children[0].children[0]; = "0.6s";

	button.mouseenter(() => {
		svgPath.setAttribute("fill", svgFillColorNew);
	button.mouseleave(() => {
		svgPath.setAttribute("fill", svgFillColorOld);

handleButtonWithSvgHover("arrow-down-btn", "arrow-down-svg", "white", "black");

/*HTML markdown example*/
<button id="arrow-down-btn">
  <div id="arrow-down-svg">
    <svg width="22" height="28" viewBox="..." fill="none">
		<path d="..." fill="black"></path>
/*HTML markdown example*/

This code changes the color of SVG <path/> on button hover Notes: - svgFillColorNew - color that will be set to SVG on hover - svgFillColorOld - color that will be set to SVG on mouse leave