How to Change SVG Icon Color on Click in JavaScript ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report SVG stands for Scalable Vector Graphics and is a vector image format for two-dimensional images that may be used to generate animations. The XML format defines the SVG document. You can change the color of an SVG using the below methods: Table of Content Using the setAttribute()Using style.fill propertyUsing the setAttribute()The setAttribute() method is used to alter the SVG element's fill attribute to dynamically change its color by passing the value for this attribute as the second parameter to this method. Syntax:element.setAttribute('attributeName', 'value');Example: The below code implements the setAttribute() method to change color of SVG in JavaScript. HTML <!DOCTYPE html> <html> <head> <title>Change SVG color</title> <style> h2 { color: green; } #element{ text-align: center; } </style> </head> <body style="text-align: center;"> <h2>GeeksforGeeks</h2> <svg id='element'> <rect id='rectangle' width='100%' height='100%' fill='green' /> </svg><br/><br/> <button id="btn">Change Color</button> <script> let rect = document.getElementById('rectangle') let btn = document.getElementById('btn') btn.addEventListener('click', () => { rect.setAttribute('fill', 'red') }) </script> </body> </html> Output: Using style.fill propertyIn this approach, the color of the SVG element can be changed by using style.fill property in JavaScript by assigning it a new color value using the assignment operator. Syntax: element.style.fill = 'value';Example: The below code uses the style.fill property to change color of the SVG onclick in JavaScript. HTML <!DOCTYPE html> <html> <head> <title>Change SVG color</title> <style> h2 { color: green; } #element { text-align: center; } </style> </head> <body style="text-align: center;"> <h2>GeeksforGeeks</h2> <svg id='element'> <circle id='circle' cx='50%' cy='50%' r='30%' fill='green' /> </svg><br /><br /> <button id="btn">Change Color</button> <script> let circle = document.getElementById('circle') let btn = document.getElementById('btn') btn.addEventListener('click', () => { circle.style.fill = 'red' }) </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to import a SVG file in JavaScript ? S soumyabroto12345 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to import a SVG file in JavaScript ? SVG (Scalable Vector Graphics) files in JavaScript are XML-based vector image files commonly used for describing two-dimensional vector graphics. In this article, we are going to see and use different ways of using SVGs. Below are the methods to import an SVG file in JavaScript: Table of Content Usi 3 min read How to Change the Color of HTML Element in JavaScript? Changing the text color of an HTML element using JavaScript enhances the user experience by making content more interactive and visually engaging. By accessing and modifying the element's style properties through the DOM, we can dynamically update font colors based on user actions or events. For exa 2 min read How to Make an SVG Image in JavaScript ? The SVG images are vector images that do not lose their quality either in the case of Zoom in or Zoom out. These are the Scalable Vector Graphics that can be directly created using the <svg> tag in HTML or dynamically using JavaScript. Let us create an SVG using JavaScript. We can use the belo 2 min read How To Change Color Of SVG On Hover? SVG stands for Scalable Vector Graphics which is an XML form approach to create graphical elements using the code format of XML, that is, Extensive Markup Language. We can use CSS elements to add colors to svg, or change its properties and even add pseudo-class effects to it. In this article, we wil 7 min read How to change SVG color ? What is SVG Element? SVG stands for Scalable Vector Graphics is a vector image format for two-dimensional graphics that can be used to create the animations and the SVG element is a container that defines a new coordinate system. The SVG document is defined by the XML format. Significance of SVG doc 2 min read How to Change the Color of Icons using Material-UI in ReactJS? Changing the icon colors makes us able to keep the webpage according to themes. Material-UI icons is a React based module. React supports more than 1000 Material-UI icons. It is one of the most popular and in-demand frameworks.ApproachTo change the color of icons using the Material UI in React JS we 3 min read Like