These are examples of icons from the _partials/svgs.twig SVG map.
Icons in the SVG map should use CSS Custom Properties for their fill and stroke. If the icon will be in an interactive element, it should include an inline transition style.
--iconColor
--borderColor
--logoColor
style="transition: var(--transition)"To change the colors, set the custom properties on the svg element.
a:hover svg {
--bgColor: var(--color-secondary);
--iconColor: var(--color-primary);
--borderColor: var(--color-secondary);
}
<div style="--logoColor: var(--color-primary); --iconColor: var(--color-primary); --borderColor: var(--color-primary)">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-top-arrow" href="#icon-top-arrow"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-top-long-arrow" href="#icon-top-long-arrow"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-email-icon" href="#icon-email-icon"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-location-pin-icon" href="#icon-location-pin-icon"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-mail-icon" href="#icon-mail-icon"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-phone-icon" href="#icon-phone-icon"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-blog" href="#icon-blog"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook" href="#icon-facebook"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-flickr" href="#icon-flickr"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram" href="#icon-instagram"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-linkedin" href="#icon-linkedin"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinterest" href="#icon-pinterest"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-snapchat" href="#icon-snapchat"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-threads" href="#icon-threads"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tiktok" href="#icon-tiktok"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter-x" href="#icon-twitter-x"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube" href="#icon-youtube"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-lead-on-solid-stacked" href="#logo-lead-on-solid-stacked"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-lead-on-solid" href="#logo-lead-on-solid"></use>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tcu-header-logo" href="#tcu-header-logo"></use>
</svg>
</div>