DEV Community

Ed is Taking Note
Ed is Taking Note

Posted on • Updated on

[CSS Trick] Mask Image

#css

We can use css mask to change the svg icon color.

<h1 class="text">AIRCRAFT</h1>
Enter fullscreen mode Exit fullscreen mode 
.text::before {
  content: "";
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 8px;

  background-color: #eb2f64;
  -webkit-mask-image: url(../img/SVG/aircraft.svg);
  -webkit-mask-size: cover;
  mask-image: url(../img/SVG/aircraft.svg);
  mask-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

Result:
Image description

Top comments (0)

Read next

nasheomirro profile image

Thoughts on utility-first approaches in CSS

Nashe Omirro -

ngbeagloriajames profile image

How to make a simple incremental, decremental, and Reset Counter App with Vue.js for a beginner

Gloria Ngbea -

saim_ansari profile image

How to Use Custom Fonts in Tailwind CSS with Example

saim -

surajondev profile image

Creating Scroll Progress Bar using CSS and JavaScript in React

Suraj Vishwakarma -