diff --git a/__mocks__/icon.mock.js b/__mocks__/icon.mock.js
new file mode 100644
index 00000000..83939917
--- /dev/null
+++ b/__mocks__/icon.mock.js
@@ -0,0 +1 @@
+module.exports = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>';
diff --git a/flow-typed/react-icons_v2.x.x.js b/flow-typed/react-icons_v2.x.x.js
deleted file mode 100644
index da0ec4c6..00000000
--- a/flow-typed/react-icons_v2.x.x.js
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module 'react-icons/lib/fa/expand' {
-  declare module.exports: any;
-}
diff --git a/package.json b/package.json
index 9d8c3f71..0a652b01 100644
--- a/package.json
+++ b/package.json
@@ -31,16 +31,18 @@
   "dependencies": {
     "d3": "^5.7.0",
     "dagre": "^0.8.2",
+    "html-react-parser": "^0.6.1",
     "kld-affine": "^2.0.4",
     "kld-intersections": "^0.4.3",
     "line-intersect": "^2.1.1",
     "svg-intersections": "^0.4.0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.7.2",
     "babel-cli": "^6.6.5",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.6",
-    "babel-jest": "^23.4.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.5",
     "babel-plugin-react": "^1.0.0",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
@@ -78,12 +80,12 @@
     "react": "^16.4.2",
     "react-ace": "^6.1.4",
     "react-dom": "^16.4.2",
-    "react-icons": "^3.2.2",
     "react-router-dom": "^4.3.1",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.3",
     "source-map-loader": "^0.2.3",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.26.1",
     "webpack-bundle-analyzer": "3.0.4",
@@ -109,6 +111,7 @@
     "prepublish": "npm run package",
     "serve": "npm run live-serve",
     "test": "jest",
+    "test:debug": "node --inspect node_modules/.bin/jest --watch --runInBand",
     "view-cover": "npm run cover -- --report=html && opn ./coverage/index.html",
     "package": "npm-run-all clean lint test build build:prod",
     "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
@@ -144,7 +147,8 @@
     ],
     "setupTestFrameworkScriptFile": "<rootDir>/jest-setup.js",
     "moduleNameMapper": {
-      "\\.(scss)$": "<rootDir>/__mocks__/styles.mock.js"
+      "\\.(scss)$": "<rootDir>/__mocks__/styles.mock.js",
+      "@fortawesome/fontawesome-free/svgs/solid/expand.svg": "<rootDir>/__mocks__/icon.mock.js"
     }
   }
 }
diff --git a/src/components/graph-controls.js b/src/components/graph-controls.js
index 51b1f0c1..3234813c 100644
--- a/src/components/graph-controls.js
+++ b/src/components/graph-controls.js
@@ -20,9 +20,12 @@
 */
 
 import React from 'react';
-import { FaExpand } from 'react-icons/fa';
+import Parse from 'html-react-parser';
+import faExpand from '@fortawesome/fontawesome-free/svgs/solid/expand.svg';
 
 const steps = 100; // Slider steps
+const parsedIcon = Parse(faExpand); //  parse SVG once
+const ExpandIcon = () => parsedIcon; // convert SVG to react component
 
 type IGraphControlProps = {
   maxZoom?: number;
@@ -82,8 +85,12 @@ class GraphControls extends React.Component<IGraphControlProps> {
           />
           <span>+</span>
         </div>
-        <button type="button" className="slider-button" onMouseDown={this.props.zoomToFit}>
-          <FaExpand />
+        <button
+          type="button"
+          className="slider-button"
+          onMouseDown={this.props.zoomToFit}
+        >
+          <ExpandIcon />
         </button>
       </div>
     );
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c0981fc7..8d3f24e5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -149,7 +149,7 @@ $background-color: #f9f9f9;
 
     > .slider-button {
       background-color: white;
-      color: $primary-color;
+      fill: $primary-color;
       border: solid 1px lightgray;
       outline: none;
       width: 31px;
diff --git a/webpack.config.js b/webpack.config.js
index 9cfcc545..d9593a38 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -104,6 +104,10 @@ module.exports = {
             loader: 'sass-loader' // compiles Sass to CSS
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },
diff --git a/webpack.prod.js b/webpack.prod.js
index 3c92f754..d47e78f7 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -72,6 +72,10 @@ module.exports = {
             loader: 'sass-loader' // compiles Sass to CSS
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },