diff --git a/routes.ts b/routes.ts
new file mode 100644
index 0000000..43b03c3
--- /dev/null
+++ b/routes.ts
@@ -0,0 +1,8 @@
+import { createElement } from "react";
+import { Home, Info } from "@material-ui/icons";
+
+const routes = [
+  { pathname: "/", icon: createElement(Home) },
+  { pathname: "/about", icon: createElement(Info) }
+];
+export default routes;
diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx
index 3738d73..4775268 100644
--- a/styles/TopAppBar.tsx
+++ b/styles/TopAppBar.tsx
@@ -2,12 +2,7 @@ import React, { useState } from "react";
 import { withRouter } from "next/router";
 import { makeStyles } from "@material-ui/styles";
 import { AppBar, Tabs, Tab } from "@material-ui/core";
-import { Home, Info } from "@material-ui/icons";
-
-export const routes = [
-  { pathname: "/", icon: <Home /> },
-  { pathname: "/about", icon: <Info /> }
-];
+import routes from "../routes";
 
 const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
   const classes = makeStyles({