diff --git a/package.json b/package.json
index ff47112dd..53ff31a92 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "file-loader": "^4.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.12.0",
+    "react-svg-loader": "^3.0.3",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.2",
diff --git a/src/assets/dataserver.svg b/src/assets/aboutdataserver.svg
similarity index 100%
rename from src/assets/dataserver.svg
rename to src/assets/aboutdataserver.svg
diff --git a/src/assets/datavisualization.svg b/src/assets/aboutdatavis.svg
similarity index 100%
rename from src/assets/datavisualization.svg
rename to src/assets/aboutdatavis.svg
diff --git a/src/assets/growth.svg b/src/assets/aboutgrowth.svg
similarity index 100%
rename from src/assets/growth.svg
rename to src/assets/aboutgrowth.svg
diff --git a/src/assets/mobile.svg b/src/assets/aboutmobile.svg
similarity index 100%
rename from src/assets/mobile.svg
rename to src/assets/aboutmobile.svg
diff --git a/src/components/about/HowItWorks.jsx b/src/components/about/HowItWorks.jsx
index d58d0c383..288d20ccc 100644
--- a/src/components/about/HowItWorks.jsx
+++ b/src/components/about/HowItWorks.jsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import mobile from '@assets/mobile.svg';
-import dataserver from '@assets/dataserver.svg';
-import growth from '@assets/growth.svg';
-import datavisualization from '@assets/datavisualization.svg';
+// React-svg-loader for Webpack bundles SVGs and makes them available as
+// React components which simply return the imported SVG paths.
+import MobileSVG from '@assets/aboutmobile.svg';
+import DataServerSVG from '@assets/aboutdataserver.svg';
+import GrowthSVG from '@assets/aboutgrowth.svg';
+import DataVizSVG from '@assets/aboutdatavis.svg';
 
 const HowItWorks = () => (
   <div className="how-it-works">
     <h1>How It Works</h1>
     <div className="grid-container">
-      <img src={mobile} alt="" />
-      <img src={dataserver} alt="" />
-      <img src={datavisualization} alt="" />
-      <img src={growth} alt="" />
+      <MobileSVG />
+      <DataServerSVG />
+      <GrowthSVG />
+      <DataVizSVG />
       <p>Community members post reports via the City&apos;s easy-to-use mobile application.</p>
       <p>
         Reports are consolidated and entered into a central database and requests are
diff --git a/webpack.config.js b/webpack.config.js
index 5bb7a7078..ae5bcf673 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -49,11 +49,25 @@ module.exports = {
         ],
       },
       {
-        test: /\.(png|svg|jpg|gif)$/,
+        test: /\.(png|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: 'react-svg-loader',
+            options: {
+              jsx: true,
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [