How can I get my own SVG icons coloured?

SVG is an image format for vector graphics. You can use SVG on the web pretty easily, but there is plenty you should know.

There are a lot of SVG icons you can use for your website. However, if you want to have the color of your icons change when viewing different pages, you need to make a small change in the code of the SVG.

Each element inside the SVG needs to have a fill property set to currentColor. Some icons might have this property set to another color and you need just to replace it with currentColor. If the fill part is missing, you just need to add it manually.

Let’s have an example. This is the code of an SVG file before editing:

<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 element inside an svg element, in our case g, circle and path, needs to have this fill=”currentColor” part. This is the way will everything 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 output of other SVG elements can vary and may not be suitable for web. You can export them with the right configuration for the web by following this tutorial.