[jarek-foksa]

Boxy SVG editor comes with built-in support for creation and editing of SVG icon sprites.

You can play with a sample SVG sprite on https://boxy-svg.com/#demo-symbols. Individual icons are shown under "Defs Panel -> Symbols". To edit an icon just double-click its thumbnail. To make part of an icon recolorable, select that part and then click "Fill Panel -> Paint -> Type -> Inherit".

You could then create separate symbols which contain a recolored instance of the original symbol. The underlying markup will look something like this:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <symbol id="blue" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
      </symbol>
      <symbol id="green" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
      </symbol>
    </defs>
  </svg>

Finally, use a fragment identifier to show a specific icon in HTML:

   <img src="sprite.svg#green">

[panstromek]

hmm, I didn't know you can use fragment identifiers in src attribute, that changes the game quite a bit. I remember looking for stuff like that, though. Not sure why I didn't anything, because it seems like it's been supported for quite a while. I only found the reuse inside svg in the same parent html document.

[jarek-foksa]

Fragment identifiers in "src" attribute seem to be supported by all modern browsers, but now I realized my example was wrong - you can reference <view> elements, but not <symbol> elements directly.

To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <view id="blue"  viewBox="  0 0 100 100"></view>
      <view id="green" viewBox="100 0 100 100"></view>
    </defs>

    <use x="0"   y="0" width="100" height="100" style="fill: blue;"  xlink:href="#recolorable"/>
    <use x="100" y="0" width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
  </svg>