<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="32" viewBox="0 0 128 32">
<defs>
<g id="icon-expand">
	<path class="path1" d="M32 0v12l-4.321-4.321-6.625 6.625-3.359-3.359 6.625-6.625-4.321-4.321zM7.679 4.321l6.625 6.625-3.359 3.359-6.625-6.625-4.321 4.321v-12h12zM27.679 24.321l4.321-4.321v12h-12l4.321-4.321-6.625-6.625 3.359-3.359zM14.304 21.054l-6.625 6.625 4.321 4.321h-12v-12l4.321 4.321 6.625-6.625z"></path>
</g>
<g id="icon-contract">
	<path class="path1" d="M2 18h12v12l-4.321-4.321-6.313 6.313-3.359-3.359 6.313-6.313zM25.679 22.321l6.313 6.313-3.359 3.359-6.313-6.313-4.321 4.321v-12h12zM30 14h-12v-12l4.321 4.321 6.313-6.313 3.359 3.359-6.313 6.313zM9.679 6.321l4.321-4.321v12h-12l4.321-4.321-6.313-6.313 3.359-3.359z"></path>
</g>
</defs></svg>

<a href="#0" class="expand-link">
  <svg class="icon icon-expand" viewBox="0 0 32 32"><use id="target" xlink:href="#icon-expand"></use></svg>
</a>

.icon {
  width: 50px;
  height: 50px;
}
body {
  padding: 30px;
}
.expand-link {
  display: inline-block;
}
svg {
  pointer-events: none;
}

$(".expand-link")
  .on("mouseenter", function() {
    $(this).find("use").attr("xlink:href", "#icon-contract");
  })
  .on("mouseleave", function() {
    $(this).find("use").attr("xlink:href", "#icon-expand");
  });