diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss
index f9433909a5..b3a5c4f473 100644
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@@ -54,7 +54,7 @@ limitations under the License.
 
     &:before {
         background-color: $accent-fg-color;
-        mask: url('../../img/icons-create-room.svg');
+        mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 80%;
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index b7fe19ca89..4a60650cef 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -105,7 +105,7 @@ limitations under the License.
 .mx_RoomSubList_addRoom {
     background-color: $roomheader-addroom-color;
     color: $roomsublist-background;
-    background-image: url('../../img/icons-room-add.svg');
+    background-image: url('$(res)/img/icons-room-add.svg');
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    background-image: url('../../img/topleft-chevron.svg');
+    background-image: url('$(res)/img/topleft-chevron.svg');
     background-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 4a84a55cd4..a21d273475 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -116,7 +116,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner {
     flex: 1;
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-position: center 367px;
     background-size: 25px;
     background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner:before {
     background-color: $greyed-fg-color;
-    mask: url('../../img/feather-icons/search-input.svg');
+    mask: url('$(res)/img/feather-icons/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 50px;
diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss
index e559236569..9434d93bd2 100644
--- a/res/css/structures/_SearchBox.scss
+++ b/res/css/structures/_SearchBox.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
-    background-image: url('../../img/icons-close.svg');
+    background-image: url('$(res)/img/icons-close.svg');
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 77eefc7e10..bf1746bd0e 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -130,12 +130,12 @@ limitations under the License.
 }
 
 .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
-    mask: url('../../img/feather-icons/users.svg');
+    mask: url('$(res)/img/feather-icons/users.svg');
     mask-position: center 11px;
 }
 
 .mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
-    mask: url('../../img/feather-icons/life-buoy.svg');
+    mask: url('$(res)/img/feather-icons/life-buoy.svg');
     mask-position: center 9px;
 }
 
diff --git a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
index 4a050b6fc4..bd703badaa 100644
--- a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
+++ b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     &:before {
-        mask: url("../../img/e2e/lock-warning.svg");
+        mask: url("$(res)/img/e2e/lock-warning.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
         content: "";
diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
index 94a92b23ce..1a8c2b93de 100644
--- a/res/css/views/elements/_DirectorySearchBox.scss
+++ b/res/css/views/elements/_DirectorySearchBox.scss
@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('../../img/icon-return.svg');
+    background-image: url('$(res)/img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('../../img/icon_context_delete.svg');
+    background: url('$(res)/img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 8ed0698a72..9bf23b1025 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -50,7 +50,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('../../img/trans.png'); */
+    /* background-image: url('$(res)/img/trans.png'); */
     pointer-events: all;
 }
 
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index c4d4d944a6..80b8126b54 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('../../img/member_chevron.png');
+    background-image: url('$(res)/img/member_chevron.png');
     background-position: center right 10px;
     background-repeat: no-repeat;
     padding-right: 30px;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 6f9491b22f..ab3b68b346 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -83,7 +83,7 @@ limitations under the License.
 
 .mx_MemberList_invite span {
     margin: 0 auto;
-    background-image: url('../../img/feather-icons/user-add.svg');
+    background-image: url('$(res)/img/feather-icons/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 56ca715b51..395dcd68d9 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -29,7 +29,7 @@ limitations under the License.
     display: none;
     flex: 0 0 16px;
     height: 16px;
-    background-image: url('../../img/icon_context.svg');
+    background-image: url('$(res)/img/icon_context.svg');
     background-repeat: no-repeat;
     background-position: center;
 }
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index 390d6606c1..b89cb0ce13 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -32,7 +32,7 @@ limitations under the License.
         width: 37px;
         height: 37px;
         background-color: $accent-color;
-        mask: url('../../img/feather-icons/search-input.svg');
+        mask: url('$(res)/img/feather-icons/search-input.svg');
         mask-repeat: no-repeat;
         mask-position: center;
     }
@@ -55,7 +55,7 @@ limitations under the License.
 
     .mx_SearchBar_cancel {
         background-color: $warning-color;
-        mask: url('../../img/cancel.svg');
+        mask: url('$(res)/img/cancel.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 14px;
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 67579552c1..a4b7a6aa51 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -54,7 +54,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 217a10be8d..eb51595858 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -61,7 +61,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_label > span {
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-size: 25px;
     background-position: left bottom;
     background-repeat: no-repeat;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 997a74e6aa..0afa6a91e1 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message_dark.svg";
-$copy-button-url: "../../img/icon_copy_message_dark.svg";
+$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
+$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index 5cc6a0d659..a7d18fa1a6 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -1,3 +1,4 @@
+@import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_base.scss";
 @import "_dark.scss";
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 2d76bd7da3..7de20c1ed4 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -169,8 +169,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -273,7 +273,7 @@ input[type=search].mx_textinput_icon {
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
 input[type=text].mx_textinput_icon.mx_textinput_search,
 input[type=search].mx_textinput_icon.mx_textinput_search {
-    background-image: url('../../img/feather-icons/search-input.svg');
+    background-image: url('$(res)/img/feather-icons/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,
diff --git a/res/themes/dharma/css/_fonts.scss b/res/themes/dharma/css/_fonts.scss
index bb45432262..93fa9afbfa 100644
--- a/res/themes/dharma/css/_fonts.scss
+++ b/res/themes/dharma/css/_fonts.scss
@@ -11,37 +11,37 @@
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
 }
 
 /*
@@ -51,14 +51,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/dharma/css/dharma.scss
index 7e3e69de34..24dc0ce18d 100644
--- a/res/themes/dharma/css/dharma.scss
+++ b/res/themes/dharma/css/dharma.scss
@@ -1,3 +1,4 @@
+@import "../../light/css/_paths.scss";
 @import "_fonts.scss";
 @import "_dharma.scss";
 @import "../../../../res/css/_components.scss";
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 44f9042554..4b3501cbaf 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -160,8 +160,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss
index 52ac95b569..c080663acf 100644
--- a/res/themes/light/css/_fonts.scss
+++ b/res/themes/light/css/_fonts.scss
@@ -7,42 +7,42 @@
  */
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
     font-weight: 600;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -54,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
diff --git a/res/themes/light/css/_paths.scss b/res/themes/light/css/_paths.scss
new file mode 100644
index 0000000000..0744347826
--- /dev/null
+++ b/res/themes/light/css/_paths.scss
@@ -0,0 +1,3 @@
+// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
+// This value is overridden by external themes in `riot-web`.
+$res: ../../..;
diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss
index 62464316f4..6ac8d0feba 100644
--- a/res/themes/light/css/light.scss
+++ b/res/themes/light/css/light.scss
@@ -1,3 +1,4 @@
+@import "_paths.scss";
 @import "_fonts.scss";
 @import "_base.scss";
 @import "../../../../res/css/_components.scss";