diff --git a/src/components/app/BottomBox.css b/src/components/app/BottomBox.css
index 9ff2cb2ff4..683dce9a99 100644
--- a/src/components/app/BottomBox.css
+++ b/src/components/app/BottomBox.css
@@ -72,11 +72,11 @@
 }
 
 .bottom-close-button {
-  background-image: url(firefox-profiler-res/img/svg/close-dark.svg);
+  background-image: url(../../../res/img/svg/close-dark.svg);
 }
 
 .bottom-assembly-button {
-  background-image: url(firefox-profiler-res/img/svg/asm-icon.svg);
+  background-image: url(../../../res/img/svg/asm-icon.svg);
 }
 
 .codeLoadingOverlay,
@@ -111,8 +111,8 @@
   width: 32px;
   height: 32px;
   flex-shrink: 0;
-  background: url(firefox-profiler-res/img/spinner.png) center center / 32px
-    32px no-repeat;
+  background: url(../../../res/img/spinner.png) center center / 32px 32px
+    no-repeat;
   content: '';
 }
 
@@ -123,8 +123,8 @@
   width: 50px;
   height: 50px;
   flex-shrink: 0;
-  background: url(firefox-profiler-res/img/svg/error.svg) center center / 32px
-    32px no-repeat;
+  background: url(../../../res/img/svg/error.svg) center center / 32px 32px
+    no-repeat;
   content: '';
   filter: brightness(70%) drop-shadow(0 1px rgb(255 255 255 / 0.5));
 }
diff --git a/src/components/app/Details.css b/src/components/app/Details.css
index 4ac240843f..e62d2ddd6b 100644
--- a/src/components/app/Details.css
+++ b/src/components/app/Details.css
@@ -26,9 +26,9 @@
 }
 
 .sidebar-open-close-button-isopen {
-  background-image: url(firefox-profiler-res/img/svg/pane-collapse.svg);
+  background-image: url(../../../res/img/svg/pane-collapse.svg);
 }
 
 .sidebar-open-close-button-isclosed {
-  background-image: url(firefox-profiler-res/img/svg/pane-expand.svg);
+  background-image: url(../../../res/img/svg/pane-expand.svg);
 }
diff --git a/src/components/app/Home.css b/src/components/app/Home.css
index c21b4fd49c..b145cf5c6b 100644
--- a/src/components/app/Home.css
+++ b/src/components/app/Home.css
@@ -145,7 +145,7 @@
   width: 20px;
   height: 20px;
   margin: 0 10px -4px 3px;
-  background: url(firefox-profiler-res/img/svg/help-blue.svg);
+  background: url(../../../res/img/svg/help-blue.svg);
   background-size: 100% 100%;
 }
 
diff --git a/src/components/app/KeyboardShortcut.css b/src/components/app/KeyboardShortcut.css
index 51c86973f5..0317004c5d 100644
--- a/src/components/app/KeyboardShortcut.css
+++ b/src/components/app/KeyboardShortcut.css
@@ -95,8 +95,8 @@
 
   /* Allow for the photon focus ring to fit in the space by using a 4px margin. */
   margin: 4px;
-  background: url(firefox-profiler-res/img/svg/searchfield-cancel.svg) 10px
-    center no-repeat;
+  background: url(../../../res/img/svg/searchfield-cancel.svg) 10px center
+    no-repeat;
   cursor: pointer;
   font-size: inherit;
 }
diff --git a/src/components/app/MenuButtons/Permalink.css b/src/components/app/MenuButtons/Permalink.css
index c7908cd01a..ba9697c1f2 100644
--- a/src/components/app/MenuButtons/Permalink.css
+++ b/src/components/app/MenuButtons/Permalink.css
@@ -5,7 +5,7 @@
 /* This background image builds on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
 .menuButtonsPermalinkButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/link-dark-12.svg);
+  background-image: url(../../../../res/img/svg/link-dark-12.svg);
 }
 
 .menuButtonsPermalinkPanel .arrowPanelContent {
diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
index c0c6e62dde..1e1a351c34 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -5,11 +5,11 @@
 /* These two background images build on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
 .menuButtonsShareButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/share-dark-12.svg);
+  background-image: url(../../../../res/img/svg/share-dark-12.svg);
 }
 
 .menuButtonsShareButtonButton-uploading::before {
-  background-image: url(firefox-profiler-res/img/svg/sharing-animated-dark-12.svg);
+  background-image: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
 }
 
 .menuButtonsShareButtonError {
@@ -27,7 +27,7 @@
 }
 
 .menuButtonsShareButtonError::before {
-  background-image: url(firefox-profiler-res/img/svg/error.svg);
+  background-image: url(../../../../res/img/svg/error.svg);
 }
 
 .menuButtonsPublishPanel {
@@ -46,7 +46,7 @@
    * This background image is 44x44, so this puts it 16px left of the text. */
   padding-left: 60px;
   margin: 0 0 0 -60px;
-  background: url(firefox-profiler-res/img/svg/info.svg) left center no-repeat;
+  background: url(../../../../res/img/svg/info.svg) left center no-repeat;
   line-height: 44px; /* This is the height of the background image */
 }
 
@@ -107,15 +107,13 @@
 .menuButtonsPublishButtonsSvgUpload {
   width: 20px;
   height: 20px;
-  background: url(firefox-profiler-res/img/svg/upload.svg) center center
-    no-repeat;
+  background: url(../../../../res/img/svg/upload.svg) center center no-repeat;
 }
 
 .menuButtonsPublishButtonsSvgDownload {
   width: 20px;
   height: 20px;
-  background: url(firefox-profiler-res/img/svg/download.svg) center center
-    no-repeat;
+  background: url(../../../../res/img/svg/download.svg) center center no-repeat;
 }
 
 .menuButtonsDownloadSize {
diff --git a/src/components/app/MenuButtons/index.css b/src/components/app/MenuButtons/index.css
index 54d6557f1e..88f34acab1 100644
--- a/src/components/app/MenuButtons/index.css
+++ b/src/components/app/MenuButtons/index.css
@@ -92,23 +92,23 @@
   width: 12px;
   height: 12px;
   padding-left: 4px;
-  background: url(firefox-profiler-res/img/svg/open-in-new-12.svg) no-repeat
-    right / 12px;
+  background: url(../../../../res/img/svg/open-in-new-12.svg) no-repeat right /
+    12px;
 }
 
 /* These classes define respective states for the metainfo button. They change
  * the icon whose generic styles are defined above. */
 .menuButtonsMetaInfoButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/info-12.svg);
+  background-image: url(../../../../res/img/svg/info-12.svg);
 }
 
 /* This is the revert button, appearing after publishing a profile. */
 .menuButtonsRevertButton::before {
-  background-image: url(firefox-profiler-res/img/svg/undo-dark-12.svg);
+  background-image: url(../../../../res/img/svg/undo-dark-12.svg);
 }
 
 .menuButtonsRevertToFullView::before {
-  background-image: url(firefox-profiler-res/img/svg/maximize-dark-12.svg);
+  background-image: url(../../../../res/img/svg/maximize-dark-12.svg);
 }
 
 .profileInfoUploadedActions {
@@ -135,8 +135,8 @@
   display: block;
   width: 32px;
   height: 32px;
-  background: url(firefox-profiler-res/img/svg/cloud-dark-12.svg) no-repeat
-    left / 32px;
+  background: url(../../../../res/img/svg/cloud-dark-12.svg) no-repeat left /
+    32px;
   content: '';
   opacity: 0.5;
 }
diff --git a/src/components/app/ProfileDeleteButton.css b/src/components/app/ProfileDeleteButton.css
index e778bf16ea..0eb6a1adc5 100644
--- a/src/components/app/ProfileDeleteButton.css
+++ b/src/components/app/ProfileDeleteButton.css
@@ -6,8 +6,8 @@
   /* Note: 20px is: 16px (icon width) + 4px (distance from the text) */
   padding-left: 20px;
   margin: 0;
-  background: url(firefox-profiler-res/img/svg/check-dark.svg) no-repeat left /
-    16px 16px;
+  background: url(../../../res/img/svg/check-dark.svg) no-repeat left / 16px
+    16px;
   white-space: nowrap;
 }
 
@@ -16,8 +16,8 @@
   padding-left: 24px;
 
   /* The icon is 4px below the top */
-  background: url(firefox-profiler-res/img/svg/error-red.svg) no-repeat 0 4px /
-    16px 16px;
+  background: url(../../../res/img/svg/error-red.svg) no-repeat 0 4px / 16px
+    16px;
   color: var(--red-60);
   overflow-wrap: break-word;
 }
diff --git a/src/components/app/ProfileName.css b/src/components/app/ProfileName.css
index f229366b22..4a34f40ec6 100644
--- a/src/components/app/ProfileName.css
+++ b/src/components/app/ProfileName.css
@@ -26,7 +26,7 @@
 
 .profileNameButton::before {
   flex-shrink: 0;
-  background-image: url(firefox-profiler-res/img/svg/edit-name-profiler.svg);
+  background-image: url(../../../res/img/svg/edit-name-profiler.svg);
 }
 
 /* Using the style for links rather than for normal inputs, because we don't
diff --git a/src/components/app/ProfileViewer.css b/src/components/app/ProfileViewer.css
index 57d48daa0a..e59a7ccdca 100644
--- a/src/components/app/ProfileViewer.css
+++ b/src/components/app/ProfileViewer.css
@@ -80,8 +80,8 @@
   margin: 3px 0 3px 3px;
 
   /* Other */
-  background: var(--green-50) url(firefox-profiler-res/img/svg/back-arrow.svg)
-    center center no-repeat;
+  background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
+    center no-repeat;
   color: #000;
 }
 
diff --git a/src/components/calltree/CallTree.css b/src/components/calltree/CallTree.css
index 04ec32e9f2..1e4055fe98 100644
--- a/src/components/calltree/CallTree.css
+++ b/src/components/calltree/CallTree.css
@@ -32,5 +32,5 @@
 
 .treeBadge.inlined,
 .treeBadge.divergent-inlining {
-  background: url(firefox-profiler-res/img/svg/inlined-icon.svg);
+  background: url(../../../res/img/svg/inlined-icon.svg);
 }
diff --git a/src/components/shared/CallNodeContextMenu.css b/src/components/shared/CallNodeContextMenu.css
index 5b6b61137a..fd94da6e7d 100644
--- a/src/components/shared/CallNodeContextMenu.css
+++ b/src/components/shared/CallNodeContextMenu.css
@@ -16,19 +16,19 @@
 }
 
 .callNodeContextMenuIconMerge {
-  background-image: url(firefox-profiler-res/img/svg/merge-icon.svg);
+  background-image: url(../../../res/img/svg/merge-icon.svg);
 }
 
 .callNodeContextMenuIconCollapse {
-  background-image: url(firefox-profiler-res/img/svg/collapse-icon.svg);
+  background-image: url(../../../res/img/svg/collapse-icon.svg);
 }
 
 .callNodeContextMenuIconFocus {
-  background-image: url(firefox-profiler-res/img/svg/focus-icon.svg);
+  background-image: url(../../../res/img/svg/focus-icon.svg);
 }
 
 .callNodeContextMenuIconDrop {
-  background-image: url(firefox-profiler-res/img/svg/drop-icon.svg);
+  background-image: url(../../../res/img/svg/drop-icon.svg);
 }
 
 .callNodeContextMenuShortcut {
diff --git a/src/components/shared/FilterNavigatorBar.css b/src/components/shared/FilterNavigatorBar.css
index 95337adf6d..2a41257b5c 100644
--- a/src/components/shared/FilterNavigatorBar.css
+++ b/src/components/shared/FilterNavigatorBar.css
@@ -9,7 +9,7 @@
   --internal-active-background-color: rgb(0 0 0 / 0.2);
   --internal-selected-background-color: transparent;
   --internal-selected-color: var(--selected-color, var(--blue-60));
-  --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator.svg);
+  --internal-separator-img: url(../../../res/img/svg/scope-bar-separator.svg);
 
   display: flex;
   height: 24px;
@@ -159,7 +159,7 @@
     --internal-active-background-color: SelectedItemText;
     --internal-selected-background-color: SelectedItem;
     --internal-selected-color: SelectedItemText;
-    --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator-hcm-light.svg);
+    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
   }
 
   .filterNavigatorBarItem {
@@ -183,7 +183,7 @@
 
   @media (prefers-color-scheme: dark) {
     .filterNavigatorBar {
-      --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator-hcm-dark.svg);
+      --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-dark.svg);
     }
   }
 }
diff --git a/src/components/shared/IdleSearchField.css b/src/components/shared/IdleSearchField.css
index 31803e0300..99ffa91699 100644
--- a/src/components/shared/IdleSearchField.css
+++ b/src/components/shared/IdleSearchField.css
@@ -21,7 +21,7 @@
   position: relative;
   flex: 1;
   margin: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-icon.svg) 3px center
+  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
     no-repeat white;
   background-size: 11px 11px;
 }
@@ -34,7 +34,7 @@
   height: 11px;
   padding: 0;
   border: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-cancel.svg) top left
+  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
     no-repeat;
   background-size: contain;
   color: transparent;
diff --git a/src/components/shared/MarkerContextMenu.css b/src/components/shared/MarkerContextMenu.css
index 22d06d6859..851877cfac 100644
--- a/src/components/shared/MarkerContextMenu.css
+++ b/src/components/shared/MarkerContextMenu.css
@@ -10,45 +10,45 @@
 
 /* Here are all icons for the marker context menu. */
 .markerContextMenuIconSetSelectionFromMarker {
-  background-image: url(firefox-profiler-res/img/svg/set-selection-from-marker.svg);
+  background-image: url(../../../res/img/svg/set-selection-from-marker.svg);
 }
 
 .markerContextMenuIconStartSelectionHere, /* <- for dot markers */
 .markerContextMenuIconStartSelectionAtMarkerStart /* <- for interval markers */ {
-  background-image: url(firefox-profiler-res/img/svg/start-selection-at-marker-start.svg);
+  background-image: url(../../../res/img/svg/start-selection-at-marker-start.svg);
 }
 
 .markerContextMenuIconStartSelectionAtMarkerEnd {
-  background-image: url(firefox-profiler-res/img/svg/start-selection-at-marker-end.svg);
+  background-image: url(../../../res/img/svg/start-selection-at-marker-end.svg);
 }
 
 .markerContextMenuIconEndSelectionAtMarkerStart {
-  background-image: url(firefox-profiler-res/img/svg/end-selection-at-marker-start.svg);
+  background-image: url(../../../res/img/svg/end-selection-at-marker-start.svg);
 }
 
 .markerContextMenuIconEndSelectionHere, /* <- for dot markers */
 .markerContextMenuIconEndSelectionAtMarkerEnd /* <- for interval markers */ {
-  background-image: url(firefox-profiler-res/img/svg/end-selection-at-marker-end.svg);
+  background-image: url(../../../res/img/svg/end-selection-at-marker-end.svg);
 }
 
 .markerContextMenuIconCopyDescription {
-  background-image: url(firefox-profiler-res/img/svg/copy-dark.svg);
+  background-image: url(../../../res/img/svg/copy-dark.svg);
 }
 
 .markerContextMenuIconCopyStack {
-  background-image: url(firefox-profiler-res/img/svg/copy-marker-stack.svg);
+  background-image: url(../../../res/img/svg/copy-marker-stack.svg);
 }
 
 .markerContextMenuIconCopyUrl {
-  background-image: url(firefox-profiler-res/img/svg/globe-dark.svg);
+  background-image: url(../../../res/img/svg/globe-dark.svg);
 }
 
 .markerContextMenuIconCopyPayload {
-  background-image: url(firefox-profiler-res/img/svg/copy-marker-payload.svg);
+  background-image: url(../../../res/img/svg/copy-marker-payload.svg);
 }
 
 .markerContextMenuSelectThread {
-  background-image: url(firefox-profiler-res/img/svg/select-thread.svg);
+  background-image: url(../../../res/img/svg/select-thread.svg);
 }
 
 /* These icons don't look nice when selected, unless if we invert them. However
diff --git a/src/components/shared/MarkerSettings.css b/src/components/shared/MarkerSettings.css
index 60459717e9..84399301b8 100644
--- a/src/components/shared/MarkerSettings.css
+++ b/src/components/shared/MarkerSettings.css
@@ -20,7 +20,7 @@
   flex: none;
   padding-right: 30px;
   margin: 0 4px;
-  background-image: url(firefox-profiler-res/img/svg/filter.svg);
+  background-image: url(../../../res/img/svg/filter.svg);
   background-position: 4px center;
   background-repeat: no-repeat;
 }
diff --git a/src/components/shared/ProfileMetaInfoSummary.css b/src/components/shared/ProfileMetaInfoSummary.css
index baebb61e6e..dffc90cc34 100644
--- a/src/components/shared/ProfileMetaInfoSummary.css
+++ b/src/components/shared/ProfileMetaInfoSummary.css
@@ -20,34 +20,32 @@
 
 .profileMetaInfoSummaryProductAndVersion {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
-  background: url(firefox-profiler-res/img/svg/info.svg) left center / 1em
-    no-repeat;
+  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryProductAndVersion[data-product^='Firefox'],
 .profileMetaInfoSummaryProductAndVersion[data-product='Fennec'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/firefoxbrowser.svg);
+  background-image: url(../../../res/img/svg/brands/firefoxbrowser.svg);
 }
 
 .profileMetaInfoSummaryPlatform {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
   margin-left: 1em;
-  background: url(firefox-profiler-res/img/svg/info.svg) left center / 1em
-    no-repeat;
+  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='macOS'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/apple.svg);
+  background-image: url(../../../res/img/svg/brands/apple.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Windows'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/windows.svg);
+  background-image: url(../../../res/img/svg/brands/windows.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Linux'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/linux.svg);
+  background-image: url(../../../res/img/svg/brands/linux.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Android'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/android.svg);
+  background-image: url(../../../res/img/svg/brands/android.svg);
 }
diff --git a/src/components/shared/TrackSearchField.css b/src/components/shared/TrackSearchField.css
index 6a2216d7d5..9f3565a06f 100644
--- a/src/components/shared/TrackSearchField.css
+++ b/src/components/shared/TrackSearchField.css
@@ -26,7 +26,7 @@
   position: relative;
   flex: 1;
   margin: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-icon.svg) 3px center
+  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
     no-repeat white;
   background-size: 11px 11px;
 }
@@ -41,7 +41,7 @@
   height: 11px;
   padding: 0;
   border: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-cancel.svg) top left
+  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
     no-repeat;
   background-size: contain;
   color: transparent;
diff --git a/src/components/timeline/Selection.css b/src/components/timeline/Selection.css
index dc05ed3555..48de90f2f4 100644
--- a/src/components/timeline/Selection.css
+++ b/src/components/timeline/Selection.css
@@ -160,7 +160,7 @@
 .timelineSelectionOverlayZoomButton::before {
   position: absolute;
   display: grid;
-  content: url(firefox-profiler-res/img/svg/zoom-icon.svg);
+  content: url(../../../res/img/svg/zoom-icon.svg);
   inset: 0;
   place-content: center;
 }
diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css
index c50795412b..7bba80b5d7 100644
--- a/src/components/timeline/Track.css
+++ b/src/components/timeline/Track.css
@@ -109,7 +109,7 @@
   padding: 1px;
   border: 0;
   border-radius: 2px;
-  background: url(firefox-profiler-res/img/svg/close-dark.svg) no-repeat center;
+  background: url(../../../res/img/svg/close-dark.svg) no-repeat center;
   background-origin: content-box;
   background-size: contain;
   color: transparent;
@@ -217,7 +217,7 @@
   @media (prefers-color-scheme: dark) {
     /* We need to adapt the cross icon in dark mode so it still visible */
     .timelineTrackCloseButton {
-      background-image: url(firefox-profiler-res/img/svg/close-light.svg);
+      background-image: url(../../../res/img/svg/close-light.svg);
     }
   }
 }