diff --git a/packages/grafana-ui/.storybook/grafana.dark.scss b/packages/grafana-ui/.storybook/grafana.dark.scss
new file mode 100644
index 00000000000..6b40cca3a73
--- /dev/null
+++ b/packages/grafana-ui/.storybook/grafana.dark.scss
@@ -0,0 +1,6 @@
+// reset font file paths so storybook loads them based on
+// staticDirs defined in packages/grafana-ui/.storybook/main.ts
+$font-file-path: './public/fonts';
+$fa-font-path: $font-file-path;
+
+@import '../../../public/sass/grafana.dark.scss';
diff --git a/packages/grafana-ui/.storybook/grafana.light.scss b/packages/grafana-ui/.storybook/grafana.light.scss
new file mode 100644
index 00000000000..01f0865cef8
--- /dev/null
+++ b/packages/grafana-ui/.storybook/grafana.light.scss
@@ -0,0 +1,6 @@
+// reset font file paths so storybook loads them based on
+// staticDirs defined in packages/grafana-ui/.storybook/main.ts
+$font-file-path: './public/fonts';
+$fa-font-path: $font-file-path;
+
+@import '../../../public/sass/grafana.light.scss';
diff --git a/packages/grafana-ui/.storybook/main.ts b/packages/grafana-ui/.storybook/main.ts
index 19fcfeb2fb3..b09a98f1b75 100644
--- a/packages/grafana-ui/.storybook/main.ts
+++ b/packages/grafana-ui/.storybook/main.ts
@@ -1,4 +1,7 @@
-const path = require('path');
+import path from 'path';
+import type { StorybookConfig } from '@storybook/react/types';
+import { getAvailableIcons, IconName } from '../src/types/icon';
+import { getIconSubDir } from '../src/components/Icon/utils';
 
 const stories = ['../src/**/*.story.@(tsx|mdx)'];
 
@@ -6,7 +9,19 @@ if (process.env.NODE_ENV !== 'production') {
   stories.push('../src/**/*.story.internal.@(tsx|mdx)');
 }
 
-const mainConfig = {
+// We limit icon paths to only the available icons so publishing
+// doesn't require uploading 1000s of unused assets.
+const iconPaths = getAvailableIcons()
+  .filter((iconName) => !iconName.includes('fa'))
+  .map((iconName) => {
+    const subDir = getIconSubDir(iconName as IconName, 'default');
+    return {
+      from: `../../../public/img/icons/${subDir}/${iconName}.svg`,
+      to: `/public/img/icons/${subDir}/${iconName}.svg`,
+    };
+  });
+
+const mainConfig: StorybookConfig = {
   stories,
   addons: [
     {
@@ -67,9 +82,12 @@ const mainConfig = {
     fastRefresh: true,
   },
   staticDirs: [
-    { from: '../../../public/fonts', to: '/fonts' },
-    { from: '../../../public/img', to: '/public/img' },
+    { from: '../../../public/fonts', to: '/public/fonts' },
+    { from: '../../../public/img/grafana_text_logo-dark.svg', to: '/public/img/grafana_text_logo-dark.svg' },
+    { from: '../../../public/img/grafana_text_logo-light.svg', to: '/public/img/grafana_text_logo-light.svg' },
+    { from: '../../../public/img/fav32.png', to: '/public/img/fav32.png' },
     { from: '../../../public/lib', to: '/public/lib' },
+    ...iconPaths,
   ],
   typescript: {
     check: true,
@@ -82,7 +100,7 @@ const mainConfig = {
       savePropValueAsString: true,
     },
   },
-  webpackFinal: async (config: any) => {
+  webpackFinal: async (config) => {
     // expose jquery as a global so jquery plugins don't break at runtime.
     config.module.rules.push({
       test: require.resolve('jquery'),
@@ -92,7 +110,7 @@ const mainConfig = {
       },
     });
 
-    // use the raw-loader for SVGS for compatibility with grafana/ui Icon component.
+    // use the asset module for SVGS for compatibility with grafana/ui Icon component.
     config.module.rules.push({
       test: /(unicons|mono|custom)[\\/].*\.svg$/,
       type: 'asset/source',
diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts
index 37259f1e06d..1c91f1565fa 100644
--- a/packages/grafana-ui/.storybook/preview.ts
+++ b/packages/grafana-ui/.storybook/preview.ts
@@ -11,9 +11,9 @@ import '../../../public/vendor/flot/jquery.flot.gauge';
 import { withTheme } from '../src/utils/storybook/withTheme';
 import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 // @ts-ignore
-import lightTheme from '../../../public/sass/grafana.light.scss';
+import lightTheme from './grafana.light.scss';
 // @ts-ignore
-import darkTheme from '../../../public/sass/grafana.dark.scss';
+import darkTheme from './grafana.dark.scss';
 import { GrafanaLight, GrafanaDark } from './storybookTheme';
 
 const handleThemeChange = (theme: any) => {
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 775341a1a9c..dcb5dee1935 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -101,6 +101,8 @@ $font-family-sans-serif: ${theme.typography.fontFamily};
 /* stylelint-disable-next-line string-quotes */
 $font-family-monospace: ${theme.typography.fontFamilyMonospace};
 
+$font-file-path: '../fonts' !default;
+
 $font-size-base: ${theme.typography.fontSize}px !default;
 
 $font-size-lg: ${theme.typography.size.lg} !default;
diff --git a/packages/grafana-ui/tsconfig.json b/packages/grafana-ui/tsconfig.json
index 46b420ac88b..9692546a057 100644
--- a/packages/grafana-ui/tsconfig.json
+++ b/packages/grafana-ui/tsconfig.json
@@ -12,7 +12,8 @@
   // override for storybook which uses ts-node to compile main.ts / preview.ts files.
   "ts-node": {
     "compilerOptions": {
-      "isolatedModules": false
+      "isolatedModules": false,
+      "module": "commonjs"
     }
   }
 }
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 43ead5a4489..43dfe41fa6e 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -103,6 +103,8 @@ $font-family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
 /* stylelint-disable-next-line string-quotes */
 $font-family-monospace: 'Roboto Mono', monospace;
 
+$font-file-path: '../fonts' !default;
+
 $font-size-base: 14px !default;
 
 $font-size-lg: 18px !default;
diff --git a/public/sass/base/_fonts.scss b/public/sass/base/_fonts.scss
index 35399de4718..bef27e13ecd 100644
--- a/public/sass/base/_fonts.scss
+++ b/public/sass/base/_fonts.scss
@@ -7,7 +7,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
 }
 /* cyrillic */
@@ -16,7 +16,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
 }
 /* greek-ext */
@@ -25,7 +25,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+1f00-1fff;
 }
 /* greek */
@@ -34,7 +34,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
+  src: url(#{$font-file-path}/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@@ -43,7 +43,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
 }
 /* latin-ext */
@@ -52,7 +52,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
 }
 /* latin */
@@ -61,7 +61,8 @@
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'),
+    url(#{$font-file-path}/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
   unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
 }
 /* cyrillic-ext */
@@ -70,7 +71,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
 }
 /* cyrillic */
@@ -79,7 +80,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
 }
 /* greek-ext */
@@ -88,7 +89,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+1f00-1fff;
 }
 /* greek */
@@ -97,7 +98,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+0370-03ff;
 }
 /* vietnamese */
@@ -106,7 +107,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
 }
 /* latin-ext */
@@ -115,7 +116,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
   unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
 }
 /* latin */
@@ -125,7 +126,7 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
   unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
 }
 /* cyrillic-ext */
@@ -134,7 +135,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
 }
 /* cyrillic */
@@ -143,7 +144,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
 }
 /* greek-ext */
@@ -152,7 +153,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+1f00-1fff;
 }
 /* greek */
@@ -161,7 +162,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0370-03ff;
 }
 /* vietnamese */
@@ -170,7 +171,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
 }
 /* latin-ext */
@@ -179,7 +180,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
 }
 /* latin */
@@ -189,7 +190,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
 }
 /* cyrillic-ext */
@@ -198,7 +199,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
   unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
 }
 /* cyrillic */
@@ -207,7 +208,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
   unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
 }
 /* greek-ext */
@@ -216,7 +217,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
   unicode-range: U+1f00-1fff;
 }
 /* greek */
@@ -225,7 +226,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
   unicode-range: U+0370-03ff;
 }
 /* vietnamese */
@@ -234,7 +235,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
   unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
 }
 /* latin-ext */
@@ -243,7 +244,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
   unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
 }
 /* latin */
@@ -252,7 +253,7 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
+    url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
   unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
 }
 
@@ -262,7 +263,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2) format('woff2');
+  src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
     U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@@ -273,7 +275,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(../fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2) format('woff2');
+  src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
+    format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
     U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index 64223c3cade..150d5836622 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -1,5 +1,5 @@
-@import 'react-grid-layout/css/styles.css';
-@import 'react-resizable/css/styles.css';
+@import 'react-grid-layout/css/styles';
+@import 'react-resizable/css/styles';
 
 .react-resizable-handle {
   // this needs to use visibility and not display none in order not to cause resize flickering