title: Apply Hover changes on multiple paths in SVG files
body: <p>I am currently trying to implement a color change on hover effect on a icon i created on Figma,
  the problem is when i change the fill path on hover, only when one path changes color instead of the whole icon. </p>
  
  <p>My icon consists of two colors and 8 paths.</p>
  
  <p>My intentions is the change color of all paths inside the SVG. Am i doing something wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button id="filter-btn" href="#" target=""&gt;
      &lt;svg width="24" height="24" viewBox="0 0 24 24" fill="#A70606" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 9.19999C23 9.64182 22.6418 9.99999 22.2 9.99999H7.8C7.35817 9.99999 7 9.64182 7 9.19999C7 8.75817 7.35817 8.39999 7.8 8.39999H22.2C22.6418 8.39999 23 8.75817 23 9.19999Z" fill="#757575"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 10C3.55228 10 4 9.55228 4 9C4 8.44772 3.55228 8 3 8C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10ZM3 11C4.10457 11 5 10.1046 5 9C5 7.89543 4.10457 7 3 7C1.89543 7 1 7.89543 1 9C1 10.1046 1.89543 11 3 11Z" fill="#757575"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 4.19999C23 4.64182 22.6418 4.99999 22.2 4.99999H7.8C7.35817 4.99999 7 4.64182 7 4.19999C7 3.75817 7.35817 3.39999 7.8 3.39999H22.2C22.6418 3.39999 23 3.75817 23 4.19999Z" fill="#C1C1C1"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 14.2C23 14.6418 22.6418 15 22.2 15H7.8C7.35817 15 7 14.6418 7 14.2C7 13.7582 7.35817 13.4 7.8 13.4H22.2C22.6418 13.4 23 13.7582 23 14.2Z" fill="#C1C1C1"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 19.2C23 19.6418 22.6418 20 22.2 20H7.8C7.35817 20 7 19.6418 7 19.2C7 18.7582 7.35817 18.4 7.8 18.4H22.2C22.6418 18.4 23 18.7582 23 19.2Z" fill="#C1C1C1"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3.55228 5 4 4.55228 4 4C4 3.44772 3.55228 3 3 3C2.44772 3 2 3.44772 2 4C2 4.55228 2.44772 5 3 5ZM3 6C4.10457 6 5 5.10457 5 4C5 2.89543 4.10457 2 3 2C1.89543 2 1 2.89543 1 4C1 5.10457 1.89543 6 3 6Z" fill="#C1C1C1"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 20C3.55228 20 4 19.5523 4 19C4 18.4477 3.55228 18 3 18C2.44772 18 2 18.4477 2 19C2 19.5523 2.44772 20 3 20ZM3 21C4.10457 21 5 20.1046 5 19C5 17.8954 4.10457 17 3 17C1.89543 17 1 17.8954 1 19C1 20.1046 1.89543 21 3 21Z" fill="#C1C1C1"/&gt;
          &lt;path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 15C3.55228 15 4 14.5523 4 14C4 13.4477 3.55228 13 3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15ZM3 16C4.10457 16 5 15.1046 5 14C5 12.8954 4.10457 12 3 12C1.89543 12 1 12.8954 1 14C1 15.1046 1.89543 16 3 16Z" fill="#C1C1C1"/&gt;
      &lt;/svg&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#toggle:hover {
      fill: #A70606;
  }
  </code></pre>