diff --git a/app/scripts/modules/amazon/src/logo/aws.logo.less b/app/scripts/modules/amazon/src/logo/aws.logo.less
index 0bf6a710a50..1ff19629a28 100644
--- a/app/scripts/modules/amazon/src/logo/aws.logo.less
+++ b/app/scripts/modules/amazon/src/logo/aws.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-aws {
-    background: url('aws.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('aws.icon.svg');
   }
 }
diff --git a/app/scripts/modules/appengine/src/logo/appengine.logo.less b/app/scripts/modules/appengine/src/logo/appengine.logo.less
index 638dc6edffe..453890f0e99 100644
--- a/app/scripts/modules/appengine/src/logo/appengine.logo.less
+++ b/app/scripts/modules/appengine/src/logo/appengine.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-appengine {
-    background: url('appengine.icon.svg') no-repeat 100% 100%;
-    background-size: cover;
+    mask-image: url('appengine.icon.svg');
   }
 }
diff --git a/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less b/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less
index ed9aca0d587..ecc8f6e7e82 100644
--- a/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less
+++ b/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-cloudfoundry {
-    background: url('cf.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('cf.logo.svg');
   }
 }
diff --git a/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less b/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less
index 6b9ecbf6bf4..e91d5d03525 100644
--- a/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less
+++ b/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less
@@ -4,16 +4,17 @@
   .icon {
     display: inline-block;
     vertical-align: sub;
-    -webkit-filter: invert(53%) sepia(100%) hue-rotate(50deg);
-    filter: invert(53%) sepia(100%) hue-rotate(50deg);
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    mask-size: cover;
+    background-color: var(--color-success);
   }
 }
 
 .disabled {
   .cloud-provider-logo {
     .icon {
-      -webkit-filter: opacity(64%);
-      filter: opacity(64%);
+      background-color: var(--color-dovegray);
     }
   }
 }
diff --git a/app/scripts/modules/dcos/logo/dcos.logo.less b/app/scripts/modules/dcos/logo/dcos.logo.less
index e29388c27dc..4a4a882fb95 100644
--- a/app/scripts/modules/dcos/logo/dcos.logo.less
+++ b/app/scripts/modules/dcos/logo/dcos.logo.less
@@ -1,6 +1,5 @@
 cloud-provider-logo {
   .icon-dcos {
-    background: url('dcos.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('dcos.logo.svg');
   }
 }
diff --git a/app/scripts/modules/ecs/src/logo/ecs.logo.less b/app/scripts/modules/ecs/src/logo/ecs.logo.less
index b6b54526bae..d712929b241 100644
--- a/app/scripts/modules/ecs/src/logo/ecs.logo.less
+++ b/app/scripts/modules/ecs/src/logo/ecs.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-ecs {
-    background: url('ecs.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('ecs.icon.svg');
   }
 }
diff --git a/app/scripts/modules/google/src/logo/gce.logo.less b/app/scripts/modules/google/src/logo/gce.logo.less
index 1da062865d8..005f9781a3a 100644
--- a/app/scripts/modules/google/src/logo/gce.logo.less
+++ b/app/scripts/modules/google/src/logo/gce.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-gce {
-    background: url('gce.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('gce.logo.svg');
   }
 }
diff --git a/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less b/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less
index ebba56d33e6..aa1f79f2a2f 100644
--- a/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less
+++ b/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-kubernetes {
-    background: url('kubernetes.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('kubernetes.icon.svg');
   }
 }
diff --git a/app/scripts/modules/openstack/src/logo/openstack.logo.less b/app/scripts/modules/openstack/src/logo/openstack.logo.less
index 12b454e32a1..ef41c87594f 100644
--- a/app/scripts/modules/openstack/src/logo/openstack.logo.less
+++ b/app/scripts/modules/openstack/src/logo/openstack.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-openstack {
-    background: url('openstack.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('openstack.logo.svg');
   }
 }
diff --git a/app/scripts/modules/titus/src/logo/titus.logo.less b/app/scripts/modules/titus/src/logo/titus.logo.less
index ea4de9f7475..9ec3b0e9b62 100644
--- a/app/scripts/modules/titus/src/logo/titus.logo.less
+++ b/app/scripts/modules/titus/src/logo/titus.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-titus {
-    background: url('titus.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('titus.logo.svg');
   }
 }