diff --git a/src/components/headerbar/HeaderbarIcon.tsx b/src/components/headerbar/HeaderbarIcon.tsx
new file mode 100644
index 0000000..b012df0
--- /dev/null
+++ b/src/components/headerbar/HeaderbarIcon.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+//@ts-ignore
+import MancalaIcon from "jsx:../../mancala.svg";
+
+const HeaderbarIcon: FunctionComponent = () => {
+    return (
+        <div className="header-bar-icon-wrapper">
+            <MancalaIcon style={{ height: "30px", width: "30px" }} />
+            <style jsx>{`
+            .header-bar-icon-wrapper {
+                margin-right: 10px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+        `}</style>
+        </div>
+    );
+}
+
+export default HeaderbarIcon;
\ No newline at end of file