diff --git a/services/idp/ui_config/webpack.config.js b/services/idp/ui_config/webpack.config.js
index 8752e2f33a..f2550cc2f2 100644
--- a/services/idp/ui_config/webpack.config.js
+++ b/services/idp/ui_config/webpack.config.js
@@ -329,10 +329,14 @@ module.exports = function(webpackEnv) {
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+              generator: {
+                filename: 'static/media/[name].[hash:8][ext]',
               },
             },
             // Process application JS with Babel.
@@ -461,20 +465,18 @@ module.exports = function(webpackEnv) {
                 'sass-loader'
               ),
             },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
+              test: /\.(woff2?|eot|ttf|otf)$/,
+              type: 'asset/resource',
+              generator: {
+                filename: 'static/media/[name].[hash:8][ext]',
+              },
+            },
+            {
+              test: /\.(png|jpe?g|gif|svg)$/,
+              type: 'asset/resource',
+              generator: {
+                filename: 'static/media/[name].[hash:8][ext]',
               },
             },
             // ** STOP ** Are you adding a new loader?