<svg style="display: none">
  <defs>
    <symbol id="icon1">
      <circle class="iconSet1" cx="150" cy="150" r="100" fill="currentColor" />
      <rect class="iconSet2" width="100" height="100" x="100" y="100" fill="currentColor" />
    </symbol>
    <symbol id="icon2">
      <rect width="100" height="100" x="100" y="100" />
    </symbol>
    <symbol id="icon3">
      <path d="M150,50 250,200 50,200z" />
    </symbol>
  </defs>
</svg>

<svg viewBox="0 0 300 300" width="100">
  <use href="#icon1" x=0"" y="0" class="icon1" />
</svg>

<svg viewBox="0 0 300 300" width="100">
  <use href="#icon2" x=0"" y="0" class="icon2" />
</svg>

<svg viewBox="0 0 300 300" width="100">
  <use href="#icon3" x=0"" y="0" class="icon3" />
</svg>

.iconSet1 {
  fill: red;
}

.iconSet2 {
  fill: violet;
}

:hover .iconSet1 {
  fill: violet;
}

:hover .iconSet2 {
  fill: red;
}

.icon2 {
  fill: blue;
}

.icon3 {
  fill: green;
}

.icon1,
.icon2,
.icon3 {
  transition: 0.2s linear;
}

.icon1:hover,
.icon2:hover,
.icon3:hover {
  fill: yellow;
}