diff --git a/client/configuration/webpack/webpack.config.dev.js b/client/configuration/webpack/webpack.config.dev.js
index 1c6abc4bc..58428b0d9 100644
--- a/client/configuration/webpack/webpack.config.dev.js
+++ b/client/configuration/webpack/webpack.config.dev.js
@@ -9,6 +9,7 @@ const sharedConfig = require("./webpack.config.shared");
 const babelOptions = require("../babel/babel.dev");
 
 const fonts = path.resolve("src/fonts");
+const images = path.resolve("src/images");
 const nodeModules = path.resolve("node_modules");
 
 const devConfig = {
@@ -28,7 +29,7 @@ const devConfig = {
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
         loader: "file-loader",
-        include: [nodeModules, fonts],
+        include: [nodeModules, fonts, images],
         options: {
           name: "static/assets/[name].[ext]",
           // (thuang): This is needed to make sure @font url path is '/static/assets/'
diff --git a/client/configuration/webpack/webpack.config.prod.js b/client/configuration/webpack/webpack.config.prod.js
index e05ae72b8..a236da0fd 100644
--- a/client/configuration/webpack/webpack.config.prod.js
+++ b/client/configuration/webpack/webpack.config.prod.js
@@ -14,6 +14,7 @@ const CspHashPlugin = require("./cspHashPlugin");
 const sharedConfig = require("./webpack.config.shared");
 
 const fonts = path.resolve("src/fonts");
+const images = path.resolve("src/images");
 const nodeModules = path.resolve("node_modules");
 
 const prodConfig = {
@@ -43,7 +44,7 @@ const prodConfig = {
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
         loader: "file-loader",
-        include: [nodeModules, fonts],
+        include: [nodeModules, fonts, images],
         options: {
           name: "static/assets/[name]-[contenthash].[ext]",
           // (thuang): This is needed to make sure @font url path is '../static/assets/'
diff --git a/client/src/components/framework/logo.js b/client/src/components/framework/logo.js
index e95e4b1c0..3b7d3881c 100644
--- a/client/src/components/framework/logo.js
+++ b/client/src/components/framework/logo.js
@@ -1,17 +1,15 @@
 import React from "react";
-import * as globals from "../../globals";
+import icon from "../../images/icon.png";
 
 const Logo = (props) => {
   const { size } = props;
   return (
-    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
-      <rect width="48" height="48" fill="white" />
-      <rect width="48" height="48" fill={globals.logoColor} />
-      <rect x="19" y="19" width="22" height="22" fill="white" />
-      <rect x="24" y="24" width="12" height="12" fill={globals.logoColor} />
-      <rect x="7" y="19" width="7" height="22" fill="white" />
-      <rect x="19" y="7" width="22" height="7" fill="white" />
-    </svg>
+    <img
+      src={icon}
+      height={size}
+      width={size}
+      alt="CELLxGENE Annotate Logo"
+     />
   );
 };
 
diff --git a/client/src/images/icon.png b/client/src/images/icon.png
new file mode 100644
index 000000000..dbc81eb88
Binary files /dev/null and b/client/src/images/icon.png differ