How can I get my own SVG icons coloured?

SVG is an image for­mat for vec­tor graph­ics. You can use SVG on the web pret­ty eas­i­ly, but there is plen­ty you should know.

There are a lot of SVG icons you can use for your web­site. How­ev­er, if you want to have the col­or of your icons change when view­ing dif­fer­ent pages, you need to make a small change in the code of the SVG.

Each ele­ment inside the SVG needs to have a fill prop­er­ty set to cur­rent­Col­or. Some icons might have this prop­er­ty set to anoth­er col­or and you need just to replace it with cur­rent­Col­or. If the fill part is miss­ing, you just need to add it man­u­al­ly.

Let’s have an exam­ple. This is the code of an SVG file before edit­ing:

<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-16 -12)" fill-rule="evenodd">
    <circle stroke-width="2" cx="24" cy="24" r="24"/>
    <g>
      <path d="M29.715 32.927h-4.837V31.66h4.837c.13 0 .236-.107.236-.24V13.506c0-.13-.105-.237-.235-.237H17.268v19.025H16V12h13.715c.83 0 1.505.675 1.505 1.505v17.917c0 .83-.675 1.505-1.505 1.505z"/>
      <path d="M24.628 37.84c-.155 0-.306-.042-.44-.124l-7.793-4.825c-.248-.153-.395-.418-.395-.71V12.995c0-.46.375-.835.835-.835.154 0 .306.042.438.125l7.795 4.824c.248.15.396.417.396.71v19.186c0 .46-.375.835-.836.835zm-7.36-5.9l6.928 4.288V18.06l-6.928-4.288V31.94z"/>
      <path d="M22.34 24.683h1.27v2.537h-1.27z"/>
    </g>
  </g>
</svg>

Like explained, each ele­ment inside an svg ele­ment, in our case g, cir­cle and path, needs to have this fill=“currentColor” part. This is the way will every­thing look after the change:

<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor" transform="translate(-16 -12)" fill-rule="evenodd">
    <circle fill="currentColor" stroke-width="2" cx="24" cy="24" r="24"/>
    <g fill="currentColor">
      <path fill="currentColor" d="M29.715 32.927h-4.837V31.66h4.837c.13 0 .236-.107.236-.24V13.506c0-.13-.105-.237-.235-.237H17.268v19.025H16V12h13.715c.83 0 1.505.675 1.505 1.505v17.917c0 .83-.675 1.505-1.505 1.505z"/>
      <path fill="currentColor" d="M24.628 37.84c-.155 0-.306-.042-.44-.124l-7.793-4.825c-.248-.153-.395-.418-.395-.71V12.995c0-.46.375-.835.835-.835.154 0 .306.042.438.125l7.795 4.824c.248.15.396.417.396.71v19.186c0 .46-.375.835-.836.835zm-7.36-5.9l6.928 4.288V18.06l-6.928-4.288V31.94z"/>
      <path fill="currentColor" d="M22.34 24.683h1.27v2.537h-1.27z"/>
    </g>
  </g>
</svg>

*Note: The out­put of oth­er SVG ele­ments can vary and may not be suit­able for web. You can export them with the right con­fig­u­ra­tion for the web by fol­low­ing this tuto­r­i­al.

This article applies to Listable, as they share the same underlying structure.

Updated on May 31, 2017

Was this article helpful?