Easily change SVG icon colors by URL using Cloudinary

Most modern websites come with a bunch of icons scattered over the whole app. Icons are SVGs these days. I frequently find myself changing colors of a bunch of icons with a graphic app or directly in the SVG source when doing front end stuff. But there is a much more flexible way to change icon SVG colors using Cloudinary by simply change the URL.

Cloudinary for SVG icon colorization

Cloudinary?

It’s an image transformation service like imgIX. You access your images with a particular URL (which is pretty normal ;). But you can do great stuff by changing some URL parameters (the URL path in this case):

• Resizing (useful for mobile / media query cases)
• Cropping
• Versatile Filters
• File format converting
• Text and watermark stuff

imgIX uses external sources like AWS S3 buckets or FTP directories as image sources. On Cloudinary, you can directly upload your images. Let’s upload an example icon and figure it out:

1. Sign up / log in to Cloudinary
2. Create a suitable directory
3. Upload your icon (any color, not too bright)

Afterward, you can access your plain icon with an URL like this:

http://res.cloudinary.com/spiderless/image/upload/icons/google/material-icons/local_offer.svg

So far so good. Let’s change the color with some URL changes:

http://res.cloudinary.com/spiderless/image/upload/c_scale,co_rgb:3D315B,e_colorize:100,f_png,h_96,w_96/icons/google/material-icons/local_offer.png

SVG color change by URL parameter

The magic happens in one additional URL folder. What’s going on?

1. The SVG is scaled to a specific size of 96x96 pixels (yes, it’s vector, but for pixel rendering, like a browser would)
2. The result is converted to PNG (or WEBP if you want).
3. The filter “colorize” is applied with the given hex color code #3D315B.

This processing is applied once to an image, by requesting the URL the first time (takes a second). The processed image is cached and fast delivered afterward.

New great benefits

All you have to do is to change the URL in your CSS / LESS / SASS / HTML.

• Instantly play around with colors.
• Multiple colors of single icons, for example for hover effects:

.icon {
  background-image: url("http://res.cloudinary.com/spiderless/image/upload/c_scale,co_rgb:333333,e_colorize:100,f_png,h_96,w_96/icons/google/material-icons/local_offer.png");
}

.icon:hover {
  background-image: url("http://res.cloudinary.com/spiderless/image/upload/c_scale,co_rgb:666666,e_colorize:100,f_png,h_96,w_96/icons/google/material-icons/local_offer.png");
}

• Change the color of your whole application icon set by changing one LESS/SASS variable.
• Do you use icons sets (for example Google Material Icons) on different projects? Just change your existing URL hex to your project icon color.

Costs?

Probably no costs, unless you reach 5 GB of icon traffic. Which is pretty much icon traffic. You might think you’ll reach the 7,500 image transformation limit but a “transformation” is only the initial requested URL image processing and not the traffic to the cached result.

Possible disadvantages?

This practice is good for most icon needs. But it might not fit your requirements:

• External hosting of icons might not be an option for you
• Only single colored icons are possible
• Because of the conversion to PNG you have to know your icon size to prevent pixel issues.
• The file size of PNGs is bigger than vector files. (But hey, icons are small)

If you do frontend developing and want to save time or be more flexible on recoloring SVGs: Give it a try!