diff --git a/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts b/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts
index a5018a8921d..f7d66bae54b 100644
--- a/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts
+++ b/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts
@@ -58,6 +58,7 @@ const copyFiles = () => {
     'src/config/styles.mock.js',
     'src/config/jest.plugin.config.local.js',
     'src/config/matchMedia.js',
+    'src/config/react-inlinesvg.tsx',
   ];
 
   return useSpinner(`Moving ${files.join(', ')} files`, async () => {
diff --git a/packages/grafana-toolkit/src/config/jest.plugin.config.test.ts b/packages/grafana-toolkit/src/config/jest.plugin.config.test.ts
index 794a9fcf62a..851d5ad8c88 100644
--- a/packages/grafana-toolkit/src/config/jest.plugin.config.test.ts
+++ b/packages/grafana-toolkit/src/config/jest.plugin.config.test.ts
@@ -26,7 +26,6 @@ describe('Jest config', () => {
     it('should preserve mapping for stylesheets when moduleNameMapper overrides provided', () => {
       const config = jestConfig(`${__dirname}/mocks/jestSetup/overrides`);
       expect(config.moduleNameMapper).toBeDefined();
-      expect(Object.keys(config.moduleNameMapper)).toHaveLength(2);
       expect(Object.keys(config.moduleNameMapper)).toContain('\\.(css|sass|scss)$');
       expect(Object.keys(config.moduleNameMapper)).toContain('someOverride');
     });
diff --git a/packages/grafana-toolkit/src/config/jest.plugin.config.ts b/packages/grafana-toolkit/src/config/jest.plugin.config.ts
index f8a34d5b819..a1a1508d9cf 100644
--- a/packages/grafana-toolkit/src/config/jest.plugin.config.ts
+++ b/packages/grafana-toolkit/src/config/jest.plugin.config.ts
@@ -44,6 +44,7 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
   const { moduleNameMapper, ...otherOverrides } = jestConfigOverrides;
   const moduleNameMapperConfig = {
     '\\.(css|sass|scss)$': `${__dirname}/styles.mock.js`,
+    'react-inlinesvg': `${__dirname}/react-inlinesvg.tsx`,
     ...moduleNameMapper,
   };
 
diff --git a/packages/grafana-toolkit/src/config/react-inlinesvg.tsx b/packages/grafana-toolkit/src/config/react-inlinesvg.tsx
new file mode 100644
index 00000000000..d540f3aabf8
--- /dev/null
+++ b/packages/grafana-toolkit/src/config/react-inlinesvg.tsx
@@ -0,0 +1,25 @@
+// Due to the grafana/ui Icon component making fetch requests to
+// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
+// the failed fetch requests from displaying errors in console.
+
+import React from 'react';
+
+type Callback = (...args: any[]) => void;
+
+export interface StorageItem {
+  content: string;
+  queue: Callback[];
+  status: string;
+}
+
+export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
+
+const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
+
+const InlineSVG = ({ src }: { src: string }) => {
+  // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
+  const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
+  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
+};
+
+export default InlineSVG;
diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts
index b74ff22e2cb..d40c5776084 100644
--- a/packages/grafana-ui/rollup.config.ts
+++ b/packages/grafana-ui/rollup.config.ts
@@ -34,6 +34,7 @@ const buildCjsPackage = ({ env }) => {
       '@grafana/e2e-selectors',
       'moment',
       'jquery', // required to use jquery.plot, which is assigned externally
+      'react-inlinesvg', // required to mock Icon svg loading in tests
     ],
     plugins: [
       commonjs({