diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css
index 9515e6b0cb..8dacb3c4c9 100644
--- a/front_end/accessibility/axBreadcrumbs.css
+++ b/front_end/accessibility/axBreadcrumbs.css
@@ -40,7 +40,7 @@
 }
 
 .ax-breadcrumbs .ax-node::before {
-  -webkit-mask-image: url(Images/chevrons.svg);
+  -webkit-mask-image: var(--image-file-chevrons);
   -webkit-mask-position: 0 0;
   -webkit-mask-size: 30px 10px;
   -webkit-mask-repeat: no-repeat;
diff --git a/front_end/color_picker/Spectrum.ts b/front_end/color_picker/Spectrum.ts
index 0eda825421..c5d334f7c6 100644
--- a/front_end/color_picker/Spectrum.ts
+++ b/front_end/color_picker/Spectrum.ts
@@ -518,7 +518,7 @@ export class Spectrum extends UI.Widget.VBox {
     const element = document.createElement('div') as HTMLElement;
     element.classList.add('spectrum-palette-color');
     element.style.background =
-        Platform.StringUtilities.sprintf('linear-gradient(%s, %s), url(Images/checker.png)', colorText, colorText);
+        Platform.StringUtilities.sprintf('linear-gradient(%s, %s), var(--image-file-checker)', colorText, colorText);
     if (animationDelay) {
       element.animate([{opacity: 0}, {opacity: 1}], {duration: 100, delay: animationDelay, fill: 'backwards'});
     }
diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css
index 37ae5d89df..e70536946d 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -76,7 +76,7 @@
 
 .spectrum-alpha {
   top: 35px;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   background-size: 12px 11px;
 }
 
@@ -198,7 +198,7 @@
   content: " ";
   width: 13px;
   height: 13px;
-  background-image: url(Images/ic_suggest_color.svg);
+  background-image: var(--image-file-ic_suggest_color);
   background-size: contain;
   position: absolute;
   left: 5.5px;
@@ -312,7 +312,7 @@
   position: absolute;
   top: 15px;
   left: 44px;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   border-radius: 16px;
 }
 
@@ -654,7 +654,7 @@ div.palette-preview {
   top: 0;
   right: 0;
   left: auto;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   border-radius: 15px;
   display: flex;
   align-items: center;
diff --git a/front_end/components/imagePreview.css b/front_end/components/imagePreview.css
index ef8ed3bb1f..556d6e1598 100644
--- a/front_end/components/imagePreview.css
+++ b/front_end/components/imagePreview.css
@@ -14,7 +14,7 @@
   margin: 6px 0;
   max-width: 100px;
   max-height: 100px;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   user-select: text;
   vertical-align: top;
   -webkit-user-drag: auto;
diff --git a/front_end/css_overview/cssOverviewCompletedView.css b/front_end/css_overview/cssOverviewCompletedView.css
index 6a733473df..7a4131bffc 100644
--- a/front_end/css_overview/cssOverviewCompletedView.css
+++ b/front_end/css_overview/cssOverviewCompletedView.css
@@ -126,7 +126,7 @@
   top: 0;
   width: 26px;
   height: 26px;
-  background-image: url(Images/cssoverview_icons_2x.avif);
+  background-image: var(--image-file-cssoverview_icons_2x);
   background-size: 104px 26px;
 }
 
@@ -340,7 +340,7 @@
   padding: 0;
   background: none;
   border: none;
-  -webkit-mask-image: url(Images/ic_show_node_16x16.svg);
+  -webkit-mask-image: var(--image-file-ic_show_node_16x16);
   background-color: var(--color-background-elevation-1);
   width: 16px;
   height: 16px;
diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css
index 09c7a6542f..b6430da445 100644
--- a/front_end/data_grid/dataGrid.css
+++ b/front_end/data_grid/dataGrid.css
@@ -198,7 +198,7 @@
 
 .data-grid td.disclosure::before {
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-position: 0 0;
   -webkit-mask-size: 32px 24px;
   float: left;
diff --git a/front_end/elements/AccessibilityNode.ts b/front_end/elements/AccessibilityNode.ts
index 6e8aa69eb5..fd3b9777a1 100644
--- a/front_end/elements/AccessibilityNode.ts
+++ b/front_end/elements/AccessibilityNode.ts
@@ -382,7 +382,7 @@ export class AccessibilityNode extends HTMLElement {
           :host(.parent)::before {
             box-sizing: border-box;
             user-select: none;
-            -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+            -webkit-mask-image: var(--image-file-treeoutlineTriangles);
             -webkit-mask-size: 32px 24px;
             content: '\A0';
             color: transparent;
diff --git a/front_end/elements/ComputedStyleProperty.ts b/front_end/elements/ComputedStyleProperty.ts
index 901e9307ff..944c61263d 100644
--- a/front_end/elements/ComputedStyleProperty.ts
+++ b/front_end/elements/ComputedStyleProperty.ts
@@ -74,7 +74,7 @@ export class ComputedStyleProperty extends HTMLElement {
           width: var(--size);
           height: var(--size);
           margin: -1px 0 0 calc(-1 * var(--size));
-          -webkit-mask-image: url(Images/mediumIcons.svg);
+          -webkit-mask-image: var(--image-file-mediumIcons);
           -webkit-mask-position: -32px 48px;
           background-color: var(--active-control-bg-color);
         }
diff --git a/front_end/elements/ComputedStyleTrace.ts b/front_end/elements/ComputedStyleTrace.ts
index a792459c7f..cdf45669e8 100644
--- a/front_end/elements/ComputedStyleTrace.ts
+++ b/front_end/elements/ComputedStyleTrace.ts
@@ -55,7 +55,7 @@ export class ComputedStyleTrace extends HTMLElement {
           width: var(--size);
           height: var(--size);
           margin: -1px 0 0 calc(-1 * var(--size));
-          -webkit-mask-image: url(Images/mediumIcons.svg);
+          -webkit-mask-image: var(--image-file-mediumIcons);
           -webkit-mask-position: -32px 48px;
           background-color: var(--active-control-bg-color);
         }
diff --git a/front_end/elements/ElementsPanelLink.ts b/front_end/elements/ElementsPanelLink.ts
index 044cf2c40d..80c02b322f 100644
--- a/front_end/elements/ElementsPanelLink.ts
+++ b/front_end/elements/ElementsPanelLink.ts
@@ -36,7 +36,7 @@ export class ElementsPanelLink extends HTMLElement {
           width: 28px;
           height: 24px;
           -webkit-mask-position: -140px 96px;
-          -webkit-mask-image: url(Images/largeIcons.svg);
+          -webkit-mask-image: var(--image-file-largeIcons);
           background-color: rgb(110 110 110); /* stylelint-disable-line plugin/use_theme_colors */
           /* See: crbug.com/1152736 for color variable migration. */
         }
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index c3cc9ff007..f236fe239e 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -65,7 +65,7 @@
 .elements-disclosure li.parent::before {
   box-sizing: border-box;
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   content: '\A0\A0';
   color: transparent;
diff --git a/front_end/elements/layoutPane.css b/front_end/elements/layoutPane.css
index 1eea79547d..8b72352a4b 100644
--- a/front_end/elements/layoutPane.css
+++ b/front_end/elements/layoutPane.css
@@ -110,7 +110,7 @@
   padding: 0;
   background: none;
   border: none;
-  -webkit-mask-image: url(Images/ic_show_node_16x16.svg);
+  -webkit-mask-image: var(--image-file-ic_show_node_16x16);
   background-color: #333; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   width: 16px;
diff --git a/front_end/emulation/deviceModeView.css b/front_end/emulation/deviceModeView.css
index 4446c96ecf..a82eb0e105 100644
--- a/front_end/emulation/deviceModeView.css
+++ b/front_end/emulation/deviceModeView.css
@@ -214,19 +214,19 @@
 }
 
 .device-mode-right-resizer > div {
-  content: url(Images/resizeHorizontal.svg);
+  content: var(--image-file-resizeHorizontal);
   width: 6px;
   height: 26px;
 }
 
 .device-mode-left-resizer > div {
-  content: url(Images/resizeHorizontal.svg);
+  content: var(--image-file-resizeHorizontal);
   width: 6px;
   height: 26px;
 }
 
 .device-mode-bottom-resizer > div {
-  content: url(Images/resizeVertical.svg);
+  content: var(--image-file-resizeVertical);
   margin-bottom: -2px;
   width: 26px;
   height: 6px;
@@ -238,7 +238,7 @@
   right: 3px;
   width: 13px;
   height: 13px;
-  content: url(Images/resizeDiagonal.svg);
+  content: var(--image-file-resizeDiagonal);
 }
 
 .device-mode-bottom-left-resizer > div {
@@ -247,7 +247,7 @@
   left: 3px;
   width: 13px;
   height: 13px;
-  content: url(Images/resizeDiagonal.svg);
+  content: var(--image-file-resizeDiagonal);
   transform: rotate(90deg);
 }
 
diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
index 6de743de19..6e7c692321 100644
--- a/front_end/emulation/sensors.css
+++ b/front_end/emulation/sensors.css
@@ -142,12 +142,12 @@
 }
 
 .orientation-front {
-  background-image: url(Images/accelerometer-front.svg);
+  background-image: var(--image-file-accelerometer-front);
 }
 
 .orientation-back {
   transform: rotateY(180deg) translateZ(8px);
-  background-image: url(Images/accelerometer-back.svg);
+  background-image: var(--image-file-accelerometer-back);
 }
 
 .orientation-left,
@@ -162,14 +162,14 @@
   left: -8px;
   transform-origin: right center;
   transform: rotateY(-90deg);
-  background-image: url(Images/accelerometer-left.png);
+  background-image: var(--image-file-accelerometer-left);
 }
 
 .orientation-right {
   right: -8px;
   transform-origin: left center;
   transform: rotateY(90deg);
-  background-image: url(Images/accelerometer-right.png);
+  background-image: var(--image-file-accelerometer-right);
 }
 
 .orientation-left::before,
@@ -183,12 +183,12 @@
 
 .orientation-left::before,
 .orientation-left::after {
-  background-image: url(Images/accelerometer-left.png);
+  background-image: var(--image-file-accelerometer-left);
 }
 
 .orientation-right::before,
 .orientation-right::after {
-  background-image: url(Images/accelerometer-right.png);
+  background-image: var(--image-file-accelerometer-right);
 }
 
 .orientation-left::before,
@@ -219,14 +219,14 @@
   top: -8px;
   transform-origin: center bottom;
   transform: rotateX(90deg);
-  background-image: url(Images/accelerometer-top.png);
+  background-image: var(--image-file-accelerometer-top);
 }
 
 .orientation-bottom {
   bottom: -8px;
   transform-origin: center top;
   transform: rotateX(-90deg);
-  background-image: url(Images/accelerometer-bottom.png);
+  background-image: var(--image-file-accelerometer-bottom);
 }
 
 .orientation-top::before,
@@ -240,12 +240,12 @@
 
 .orientation-top::before,
 .orientation-top::after {
-  background-image: url(Images/accelerometer-top.png);
+  background-image: var(--image-file-accelerometer-top);
 }
 
 .orientation-bottom::before,
 .orientation-bottom::after {
-  background-image: url(Images/accelerometer-bottom.png);
+  background-image: var(--image-file-accelerometer-bottom);
 }
 
 .orientation-top::before,
diff --git a/front_end/inline_editor/colorSwatch.css b/front_end/inline_editor/colorSwatch.css
index 329c408821..cda159829d 100644
--- a/front_end/inline_editor/colorSwatch.css
+++ b/front_end/inline_editor/colorSwatch.css
@@ -17,7 +17,7 @@
   top: 1px;
   display: inline-block;
   user-select: none;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   line-height: 10px;
 }
 
diff --git a/front_end/inspector_main/nodeIcon.css b/front_end/inspector_main/nodeIcon.css
index 0460b3da31..5c4347889b 100644
--- a/front_end/inspector_main/nodeIcon.css
+++ b/front_end/inspector_main/nodeIcon.css
@@ -7,7 +7,7 @@
 .node-icon {
   width: 28px;
   height: 26px;
-  background-image: url(Images/nodeIcon.avif);
+  background-image: var(--image-file-nodeIcon);
   background-size: 17px 17px;
   background-repeat: no-repeat;
   background-position: center;
diff --git a/front_end/lighthouse/lighthouseStartView.css b/front_end/lighthouse/lighthouseStartView.css
index ea3edbf85b..7db4df5181 100644
--- a/front_end/lighthouse/lighthouseStartView.css
+++ b/front_end/lighthouse/lighthouseStartView.css
@@ -29,7 +29,7 @@
   flex-shrink: 0;
   background-repeat: no-repeat;
   background-size: contain;
-  background-image: url(Images/lighthouse_logo.svg);
+  background-image: var(--image-file-lighthouse_logo);
 }
 
 .lighthouse-start-view-text {
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 9c6bc25924..7ec4d15ba1 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -223,62 +223,62 @@
 /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
 
 .network-log-grid.data-grid .icon {
-  content: url(Images/resourcePlainIcon.png);
+  content: var(--image-file-resourcePlainIcon);
 }
 
 .network-log-grid.data-grid.small .icon {
-  content: url(Images/resourcePlainIconSmall.png);
+  content: var(--image-file-resourcePlainIconSmall);
 }
 
 .network-log-grid.data-grid .icon.script {
-  content: url(Images/resourceJSIcon.png);
+  content: var(--image-file-resourceJSIcon);
 }
 
 .network-log-grid.data-grid.small .icon.script {
-  content: url(Images/resourceDocumentIconSmall.png);
+  content: var(--image-file-resourceDocumentIconSmall);
 }
 
 .network-log-grid.data-grid .icon.document {
-  content: url(Images/resourceDocumentIcon.png);
+  content: var(--image-file-resourceDocumentIcon);
 }
 
 .network-log-grid.data-grid.small .icon.document {
-  content: url(Images/resourceDocumentIconSmall.png);
+  content: var(--image-file-resourceDocumentIconSmall);
 }
 
 .network-log-grid.data-grid .icon.stylesheet {
-  content: url(Images/resourceCSSIcon.png);
+  content: var(--image-file-resourceCSSIcon);
 }
 
 .network-log-grid.data-grid.small .icon.stylesheet {
-  content: url(Images/resourceDocumentIconSmall.png);
+  content: var(--image-file-resourceDocumentIconSmall);
 }
 
 .network-log-grid.data-grid .icon.media {
-  content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */
+  content: var(--image-file-resourcePlainIcon); /* FIXME: media icon */
 }
 
 .network-log-grid.data-grid.small .icon.media {
-  content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */
+  content: var(--image-file-resourcePlainIconSmall); /* FIXME: media icon */
 }
 
 .network-log-grid.data-grid .icon.texttrack {
-  content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */
+  content: var(--image-file-resourcePlainIcon); /* FIXME: vtt icon */
 }
 
 .network-log-grid.data-grid.small .icon.texttrack {
-  content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */
+  content: var(--image-file-resourcePlainIconSmall); /* FIXME: vtt icon */
 }
 
 .network-log-grid.data-grid .icon.image {
   position: relative;
-  background-image: url(Images/resourcePlainIcon.png);
+  background-image: var(--image-file-resourcePlainIcon);
   background-repeat: no-repeat;
   content: "";
 }
 
 .network-log-grid.data-grid.small .icon.image {
-  background-image: url(Images/resourcePlainIconSmall.png);
+  background-image: var(--image-file-resourcePlainIconSmall);
   content: "";
 }
 
diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css
index cfad057b07..fefb8e8e35 100644
--- a/front_end/network/networkTimingTable.css
+++ b/front_end/network/networkTimingTable.css
@@ -138,7 +138,7 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
 
 .network-fetch-timing-bar-clickable::before {
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-position: 0 0;
   -webkit-mask-size: 32px 24px;
   float: left;
diff --git a/front_end/profiler/heapProfiler.css b/front_end/profiler/heapProfiler.css
index 91b3b6698f..476ab476cd 100644
--- a/front_end/profiler/heapProfiler.css
+++ b/front_end/profiler/heapProfiler.css
@@ -79,7 +79,7 @@
 }
 
 .heap-snapshot-view .heap-snapshot-view-resizer {
-  background-image: url(Images/toolbarResizerVertical.png);
+  background-image: var(--image-file-toolbarResizerVertical);
   background-color: #eee; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   border-bottom: 1px solid rgb(179 179 179); /* stylelint-disable-line plugin/use_theme_colors */
diff --git a/front_end/profiler/profilesSidebarTree.css b/front_end/profiler/profilesSidebarTree.css
index dc793b5294..1080efa352 100644
--- a/front_end/profiler/profilesSidebarTree.css
+++ b/front_end/profiler/profilesSidebarTree.css
@@ -147,15 +147,15 @@ li.small .subtitle {
 /* Heap profiles and CPU profiles */
 
 .heap-snapshot-sidebar-tree-item .icon {
-  content: url(Images/profileIcon.png);
+  content: var(--image-file-profileIcon);
 }
 
 .profile-sidebar-tree-item .icon {
-  content: url(Images/profileIcon.png);
+  content: var(--image-file-profileIcon);
 }
 
 .profile-group-sidebar-tree-item .icon {
-  content: url(Images/profileGroupIcon.png);
+  content: var(--image-file-profileGroupIcon);
 }
 
 li.small .icon {
@@ -168,11 +168,11 @@ li.wait .icon {
 }
 
 .heap-snapshot-sidebar-tree-item.small .icon {
-  content: url(Images/profileSmallIcon.png);
+  content: var(--image-file-profileSmallIcon);
 }
 
 .profile-sidebar-tree-item.small .icon {
-  content: url(Images/profileSmallIcon.png);
+  content: var(--image-file-profileSmallIcon);
 }
 
 @media (forced-colors: active) {
diff --git a/front_end/resources/serviceWorkerUpdateCycleView.css b/front_end/resources/serviceWorkerUpdateCycleView.css
index 8b485279fc..adb541ed2d 100644
--- a/front_end/resources/serviceWorkerUpdateCycleView.css
+++ b/front_end/resources/serviceWorkerUpdateCycleView.css
@@ -52,7 +52,7 @@
 
 .service-worker-update-timing-bar-clickable::before {
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-position: 0 0;
   -webkit-mask-size: 32px 24px;
   float: left;
diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css
index 301e8de10b..2bf4bb5457 100644
--- a/front_end/screencast/screencastView.css
+++ b/front_end/screencast/screencastView.css
@@ -49,8 +49,8 @@
   background-color: transparent;
   background-image:
     -webkit-image-set(
-      url(Images/navigationControls.png) 1x,
-      url(Images/navigationControls_2x.png) 2x
+      var(--image-file-navigationControls) 1x,
+      var(--image-file-navigationControls_2x) 2x
     );
   background-clip: content-box;
   background-origin: content-box;
@@ -122,7 +122,7 @@
   border: 1px solid #999; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   position: relative;
-  cursor: -webkit-image-set(url(Images/touchCursor.png) 1x, url(Images/touchCursor_2x.png) 2x), default;
+  cursor: -webkit-image-set(var(--image-file-touchCursor) 1x, var(--image-file-touchCursor_2x) 2x), default;
 }
 
 .screencast canvas {
diff --git a/front_end/security/lockIcon.css b/front_end/security/lockIcon.css
index ccc5c726ee..1d11a2d947 100644
--- a/front_end/security/lockIcon.css
+++ b/front_end/security/lockIcon.css
@@ -7,7 +7,7 @@
 .security-property {
   height: 16px;
   width: 16px;
-  -webkit-mask-image: url(Images/securityIcons.svg);
+  -webkit-mask-image: var(--image-file-securityIcons);
   -webkit-mask-size: 80px 32px;
   background-color: #888; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
diff --git a/front_end/source_frame/imageView.css b/front_end/source_frame/imageView.css
index 03fecd20ed..c3952a7d8e 100644
--- a/front_end/source_frame/imageView.css
+++ b/front_end/source_frame/imageView.css
@@ -16,7 +16,7 @@
 .image-view img.resource-image-view {
   max-width: 100%;
   max-height: 1000px;
-  background-image: url(Images/checker.png);
+  background-image: var(--image-file-checker);
   box-shadow: 0 5px 10px var(--box-shadow-outline-color);
   user-select: text;
   -webkit-user-drag: auto;
diff --git a/front_end/text_editor/cmdevtools.css b/front_end/text_editor/cmdevtools.css
index 2307a99cb4..b33e6d0da2 100644
--- a/front_end/text_editor/cmdevtools.css
+++ b/front_end/text_editor/cmdevtools.css
@@ -619,7 +619,7 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
   left: 4px;
   cursor: pointer;
   height: 4px;
-  background-image: url(Images/errorWave.svg);
+  background-image: var(--image-file-errorWave);
   background-repeat: repeat-x;
   background-size: contain;
 }
@@ -789,7 +789,7 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
   background-color: #727272; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   content: "";
   display: block;
diff --git a/front_end/text_editor/cmdevtools.darkmode.css b/front_end/text_editor/cmdevtools.darkmode.css
index 820822a397..076d994354 100644
--- a/front_end/text_editor/cmdevtools.darkmode.css
+++ b/front_end/text_editor/cmdevtools.darkmode.css
@@ -1,6 +1,6 @@
 /* This file was automatically generated via:
 npm run generate-dark-mode-styles front_end/text_editor/cmdevtools.css
-* Last Updated: Fri Feb 26 2021 15:04:24 GMT+0000 (Coordinated Universal Time)
+* Last Updated: Wed Mar 03 2021 15:18:14 GMT+0000 (Greenwich Mean Time)
 */
 /* stylelint-disable */
 :host-context(.-theme-with-dark-background) .CodeMirror, .-theme-with-dark-background .CodeMirror{
diff --git a/front_end/timeline/timelinePanel.css b/front_end/timeline/timelinePanel.css
index fd75dd85f0..922aa15e5c 100644
--- a/front_end/timeline/timelinePanel.css
+++ b/front_end/timeline/timelinePanel.css
@@ -223,7 +223,7 @@
 
 #memory-graphs-container .timeline-memory-header::after {
   content: "";
-  background-image: url(Images/toolbarResizerVertical.png);
+  background-image: var(--image-file-toolbarResizerVertical);
   background-repeat: no-repeat;
   background-position: right center, center;
   flex: 20px 0 0;
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index 391fc51f89..b784e139be 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -45,7 +45,7 @@ input.dt-checkbox-themed::after {
   width: 12px;
   height: 12px;
   background: none;
-  -webkit-mask-image: url(Images/checkboxCheckmark.svg);
+  -webkit-mask-image: var(--image-file-checkboxCheckmark);
   -webkit-mask-size: 11px 11px;
   -webkit-mask-position: 0 0;
 }
diff --git a/front_end/ui/components/TreeOutline.ts b/front_end/ui/components/TreeOutline.ts
index 2e8080f709..102222005f 100644
--- a/front_end/ui/components/TreeOutline.ts
+++ b/front_end/ui/components/TreeOutline.ts
@@ -315,7 +315,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         .arrow-icon {
           display: inline-block;
           user-select: none;
-          -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+          -webkit-mask-image: var(--image-file-treeoutlineTriangles);
           -webkit-mask-size: 32px 24px;
           -webkit-mask-position: 0 0;
           background-color: var(--color-text-primary);
diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css
index c651483ea3..b7ebfd5502 100644
--- a/front_end/ui/infobar.css
+++ b/front_end/ui/infobar.css
@@ -80,19 +80,19 @@
 }
 
 .info-icon {
-  -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
+  -webkit-mask-image: var(--image-file-ic_info_black_18dp);
   background-color: hsl(214deg 92% 50%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .warning-icon {
-  -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
+  -webkit-mask-image: var(--image-file-ic_warning_black_18dp);
   background-color: hsl(44deg 92% 50%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .issue-icon {
-  -webkit-mask-image: url(Images/issue-text-icon.svg);
+  -webkit-mask-image: var(--image-file-issue-text-icon);
   background-color: #1a73e8; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index eb8f008d2f..569595a3c9 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -376,7 +376,7 @@ input::placeholder {
   outline: none;
   padding-right: 20px;
   padding-left: 6px;
-  background-image: url(Images/chromeSelect.svg);
+  background-image: var(--image-file-chromeSelect);
   background-color: hsl(0deg 0% 98%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   background-position: right center;
@@ -391,7 +391,7 @@ input::placeholder {
 }
 
 :host-context(.-theme-with-dark-background) .chrome-select {
-  background-image: url(Images/chromeSelectDark.svg);
+  background-image: var(--image-file-chromeSelectDark);
 }
 
 .chrome-select:enabled:active,
@@ -490,38 +490,38 @@ span[is=dt-icon-label] {
 }
 
 .spritesheet-smallicons:not(.icon-mask) {
-  background-image: url(Images/smallIcons.svg);
+  background-image: var(--image-file-smallIcons);
 }
 
 .spritesheet-smallicons.icon-mask {
-  -webkit-mask-image: url(Images/smallIcons.svg);
+  -webkit-mask-image: var(--image-file-smallIcons);
 }
 
 .spritesheet-largeicons:not(.icon-mask) {
-  background-image: url(Images/largeIcons.svg);
+  background-image: var(--image-file-largeIcons);
 }
 
 .spritesheet-largeicons.icon-mask {
-  -webkit-mask-image: url(Images/largeIcons.svg);
+  -webkit-mask-image: var(--image-file-largeIcons);
 }
 
 .spritesheet-mediumicons:not(.icon-mask) {
-  background-image: url(Images/mediumIcons.svg);
+  background-image: var(--image-file-mediumIcons);
 }
 
 .spritesheet-mediumicons.icon-mask {
-  -webkit-mask-image: url(Images/mediumIcons.svg);
+  -webkit-mask-image: var(--image-file-mediumIcons);
 }
 
 .spritesheet-arrowicons {
-  background-image: url(Images/popoverArrows.png);
+  background-image: var(--image-file-popoverArrows);
 }
 
 .force-white-icons [is=ui-icon].spritesheet-smallicons,
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
 [is=ui-icon].force-white-icons.spritesheet-smallicons,
 .-theme-preserve {
-  -webkit-mask-image: url(Images/smallIcons.svg);
+  -webkit-mask-image: var(--image-file-smallIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
@@ -531,7 +531,7 @@ span[is=dt-icon-label] {
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
 [is=ui-icon].force-white-icons.spritesheet-largeicons,
 .-theme-preserve {
-  -webkit-mask-image: url(Images/largeIcons.svg);
+  -webkit-mask-image: var(--image-file-largeIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
@@ -541,7 +541,7 @@ span[is=dt-icon-label] {
 :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
 [is=ui-icon].force-white-icons.spritesheet-mediumicons,
 .-theme-preserve {
-  -webkit-mask-image: url(Images/mediumIcons.svg);
+  -webkit-mask-image: var(--image-file-mediumIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
@@ -657,7 +657,8 @@ input.custom-search-input::-webkit-search-cancel-button {
   width: 16px;
   height: 15px;
   margin-right: 0;
-  background: -32px 32px url(Images/mediumIcons.svg);
+  background-size: -32px 32px;
+  background-image: var(--image-file-mediumIcons);
 }
 /* loading spinner */
 .spinner::before {
diff --git a/front_end/ui/reportView.css b/front_end/ui/reportView.css
index fcc3bcd9f3..0cd8041c79 100644
--- a/front_end/ui/reportView.css
+++ b/front_end/ui/reportView.css
@@ -121,5 +121,5 @@
 }
 
 .show-mask .image-wrapper {
-  background: url(Images/checker.png);
+  background: var(--image-file-checker);
 }
diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css
index 00cf65adfb..d18aff8628 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -103,7 +103,7 @@
 }
 
 .toolbar-search-navigation.toolbar-search-navigation-prev {
-  background-image: url(Images/searchPrev.png);
+  background-image: var(--image-file-searchPrev);
   border-left: 1px solid rgb(163 163 163); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
@@ -113,18 +113,18 @@
 }
 
 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
-  background-image: url(Images/searchPrev.png), #f2f2f2; /* stylelint-disable-line plugin/use_theme_colors */
+  background-image: var(--image-file-searchPrev), #f2f2f2; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .toolbar-search-navigation.toolbar-search-navigation-next {
-  background-image: url(Images/searchNext.png);
+  background-image: var(--image-file-searchNext);
   border-left: 1px solid rgb(230 230 230); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
-  background-image: url(Images/searchNext.png), #f2f2f2; /* stylelint-disable-line plugin/use_theme_colors */
+  background-image: var(--image-file-searchNext), #f2f2f2; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
index 94c367bb96..43e9f5277f 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -110,7 +110,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 
 .tree-outline li::before {
   user-select: none;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
   background-color: #727272; /* stylelint-disable-line plugin/use_theme_colors */
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index e0374dbffb..77a4ec283a 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -201,7 +201,7 @@ async function checkFileExists(filePath) {
 
 /**
  * In Devtools-Frontend we load images without a leading slash, e.g.
- * url(Images/checker.png). This works within devtools, but breaks this component
+ * var(--image-file-checker). This works within devtools, but breaks this component
  * server as the path ends up as /component_docs/my_component/Images/checker.png.
  * So we check if the path ends in Images/*.* and if so, remove anything before
  * it. Then it will be resolved correctly.