SVG Icon Sprites in VisualForce

_icons.scss

// Color it with CSS like a boss
.chevron-icon {
  width:20px;
  height:20px;
  fill:$brand-primary;
  &:hover {
    fill:darken($brand-primary,10%);
  }
}

IconSprite.component

<!-- CSS will cascade the fill or stroke through the shapes, as long as there are no presentational fill attributes on the shapes themselves -->
<apex:component layout="none">
    <svg xmlns="http://www.w3.org/2000/svg" class="hide">
        <symbol id="chevron" viewBox="0 0 15.5 39.5">
            <polygon points="15.5,19.8 10.2,19.8 0,0 5.2,0 "/>
            <polygon points="15.5,19.8 10.2,19.8 0,39.5 5.2,39.5 "/>
        </symbol>
    </svg>
</apex:component>

sample-page.page

<!-- Include the component with all of the symbol's -->
<c:IconSprite />

<!-- Reference the ID of the symbol you'd like to use-->
<svg class="chevron-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron"></use>
</svg>