DevTools Security Panel: Use the new security indicators.

third_party/WebKit/Source/devtools/front_end/security/lockIcon.css

 /* Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .lock-icon,
 .security-property {
-    background-size: cover;
     height: 16px;
     width: 16px;
+
+    -webkit-mask-image: url(Images/securityIcons.png);
+    -webkit-mask-size: 80px 32px;
+
+    background-color: #888;
 }
 
-.lock-icon-unknown {
-    background-image: url(Images/securityStateNeutral.svg);
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon,
+    .security-property {
+        -webkit-mask-image: url(Images/securityIcons_2x.png);
+    }
 }
 
+.lock-icon-secure {
+    -webkit-mask-position: 0px 0px;
+    background-color: #0B8043;
+}
+
+.lock-icon-unknown,
 .lock-icon-neutral {
-    background-image: url(Images/securityStateNeutral.svg);
+    -webkit-mask-position: -16px 0px;
+    background-color: #000000; /* Black for clarity on lower DPI screens */
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon-unknown,
+    .lock-icon-neutral {
+        background-color: #5A5A5A; /* Gray for hiDPI screens */
+    }
 }
 
 .lock-icon-insecure {
-    background-image: url(Images/securityStateInsecure.svg);
+    -webkit-mask-position: -32px 0px;
+    background-color: #C63626;
 }
 
-.lock-icon-secure {
-    background-image: url(Images/securityStateSecure.svg);
+.security-property-secure {
+    -webkit-mask-position: 0px -16px;
+    background-color: #0B8043;
+}
+
+.security-property-neutral {
+    -webkit-mask-position: -16px -16px;
+    background-color: #C63626;
 }
 
 .security-property-insecure {
-    background-image: url(Images/securityPropertyInsecure.svg);
+    -webkit-mask-position: -32px -16px;
+    background-color: #C63626;
 }
 
-.security-property-neutral {
-    background-image: url(Images/securityPropertyWarning.svg);
-}
-
-.security-property-warning {
-    background-image: url(Images/securityPropertyWarning.svg);
+.security-property-info {
+    -webkit-mask-position: -48px -16px;
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .security-property-unknown {
-    background-image: url(Images/securityPropertyUnknown.svg);
+    -webkit-mask-position: -64px -16px;
+    background-color: rgba(0, 0, 0, 0.5);
 }
-
-.security-property-secure {
-    background-image: url(Images/securityPropertySecure.svg);
-}
-
-.security-property-info {
-    background-image: url(Images/securityPropertyInfo.svg);
-}