diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 6bc8b2cee11169579426c2a82a379df5f6fa82bf..2f72eb5e0a04bdf8e5b03fae222dde1221c233e1 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -36,6 +36,7 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
+const svgToMiniDataURI = require('mini-svg-data-uri');
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -360,6 +361,18 @@ module.exports = function (webpackEnv) {
                 },
               },
             },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: require.resolve('url-loader'),
+                  options: {
+                    limit: imageInlineSizeLimit,
+                    generator: (content) => svgToMiniDataURI(content.toString()),
+                  },
+                },
+              ],
+            },
             {
               test: /\.svg$/,
               use: [
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index e3a876e1673c6a8892b70d352044a36ba283fbac..f96914025640d8ba95de540c45ac7e74eefade60 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -55,6 +55,7 @@
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
     "mini-css-extract-plugin": "2.1.0",
+    "mini-svg-data-uri": "^1.3.3",
     "postcss": "8.3.5",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.1.1",