How to colorize SVG image?
Tags: css, maskimage, svg, img
Published: 2023-02-13 01:45:01

---
title: How to colorize SVG image?
published: true
description: How to Use CSS Image Masking to Render SVG Icons as Font
tags: CSS, maskImage, SVG, img
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l64oyn1j9s31ev26jwj5.png
---

Are you tired of using [icoMoon](https://icomoon.io/) to maintain your SVG icons? While it's a great tool for managing icons, its user interface can leave much to be desired. On top of that, you may be looking to reduce your dependency on third-party tools. If so, a CDN could be the perfect solution.

However, switching from icoMoon to a CDN can bring about some changes that you should be aware of. Instead of using a **font-based approach**, a CDN requires the icons to be added **as images**. This shift in delivery and display may take some getting used to, but it should not affect the functionality of the icons themselves.

## IcoMoon font based approach

In this approach, we use the **icomoon** classnames to render the SVG icons.

And we can change the colors of SVG icons with CSS like this. 👇

```css
.icomoon-logo {
  color: red;
}
```

> ![icomoon-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95qauvg3l07bqrlgl76j.png)

## SVG with HTML `<img>` element approach

In this approach, we use the **img** tag to render the SVG icons.

But we can't change the colors of SVG icons with CSS when we use with **HTML IMG** tag. This is not worked!

We are putting the SVG icon in the **src** attribute of the **img** tag.

```html
<img src="https://cdn.dsmcdn.com/example-icon.svg" alt="example-icon" />
```

![svg-hmtl-img-approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/832d0wjehlwiogyhgf61.png)

## How we can change the colors of SVG `<img>` icons?

### 1- Hacky way

We can use a hacky way to handle that like this. 👇

This filter can able to change the colors of SVG HTML `<img>` elements but you need to find the color that you need with a trial-and-error method.

```css
img: {
  filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}
```

![hacky-way](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1inrtjszs68ngjqr8ui.png)

> [SOURCE](https://stackoverflow.com/a/53336754/10694425)

It's a way you can use it but not the best one!

What else we can do at this point? Let me introduce you to **CSS MASK**!

### 2- CSS MASK

In my opinion, **CSS masking** is the ideal solution to this problem. By using the **mask-image** property, we can render the SVG image as if it were a font. To do this, we'll need to create a **CSS class** for the SVG icon.

This is the CSS class for the SVG icon. 👇

```css
.icon {
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 24px;
  height: 24px;
}
```

Then we will use the **mask-image** property to render the SVG image like a font. But we will define it dynamically with **React**. 👇 

> We also need to define the **WebkitMaskImage** property for the **Safari** browser.

```js
const MenuItem = ({ SvgIcon, selectedName, link }: MenuItemProps) => {
  return (
    <a className={cn("menu-item", selectedName === "my_coupons" && "active")} href={link}>
      <div className="icon" style={{ maskImage: `url(${SvgIcon})`, WebkitMaskImage: `url(${SvgIcon})` }} />
      <p className="name">"My Coupons"</p>
    </a>
  );
};
```

And that's it! Now we can change the colors of SVG icons with CSS like this. 👇

```css
.icon {
  background-color: red;
}
```

Let's take a look at the result. 👇

![CSS Mask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9ou29i4esoqo0v7h0pl.png)


## Conclusion

In this article, we learned how to use SVG images like a font. We learned how to change the colors of SVG images with CSS. We also learned how to use SVG images with HTML `<img>` tag. I hope you enjoyed this article. If you have any questions, please let me know in the comments. Thanks for reading!