<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="path" d="M32 0v12l-4.321-4.321-6.625 6.625-3.359-3.359 6.625-6.625-4.321-4.321"></path>
  <path class="path" d="M7.679 4.321l6.625 6.625-3.359 3.359-6.625-6.625-4.321 4.321v-12h12z"></path>
  <path class="path" d="M27.679 24.321l4.321-4.321v12h-12l4.321-4.321-6.625-6.625 3.359-3.359z"></path>
  <path class="path" d="M14.304 21.054l-6.625 6.625 4.321 4.321h-12v-12l4.321 4.321 6.625-6.625"></path>
 </g>
  
</defs></svg>
<!-- visable -->

<p>Xlink use. This is not working! </p>
<a href="#0" class="expand-link">
  <svg class="icon" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg>
</a>

<p> Drawn orignal SVG this is working </p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="icon" >
<g id="icon-expand">
	<path class="path" d="M32 0v12l-4.321-4.321-6.625 6.625-3.359-3.359 6.625-6.625-4.321-4.321"></path>
  <path class="path" d=" M7.679 4.321l6.625 6.625-3.359 3.359-6.625-6.625-4.321 4.321v-12h12z"></path>
  <path class="path" d="M27.679 24.321l4.321-4.321v12h-12l4.321-4.321-6.625-6.625 3.359-3.359z"></path>
  <path class="path" d="M14.304 21.054l-6.625 6.625 4.321 4.321h-12v-12l4.321 4.321 6.625-6.625"></path>
 </g>
</svg>

body {
  padding: 30px;
}

.icon {
  width: 50px;
  height: 50px;
}
svg .path {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}
svg:hover .path,
svg:hover ~ .path {
  transform: rotate(180deg);
}

svg:hover {
  fill: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.