diff --git a/src/renderer/components/icon/flat_arrow.svg b/src/renderer/components/icon/flat_arrow.svg
deleted file mode 100644
index 5cef06309b..0000000000
--- a/src/renderer/components/icon/flat_arrow.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<path d="M21.6,12l-5.9-5.9v4.8H2.4v2.2h13.2v4.8L21.6,12z"/>
-</svg>
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css
index 5ffcf9cef4..83b3c4cd76 100644
--- a/src/renderer/components/layout/topbar.module.css
+++ b/src/renderer/components/layout/topbar.module.css
@@ -34,11 +34,6 @@
   @apply flex items-center;
 }
 
-.prevArrow {
-  @apply ml-5;
-  transform: rotate(180deg);
-}
-
 .controls {
   align-self: flex-end;
   padding-right: 1.5rem;
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 72173a4631..2b1c49267a 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -87,14 +87,14 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       <div className={styles.history}>
         <Icon
           data-testid="history-back"
-          svg="flat_arrow"
-          className={styles.prevArrow}
+          material="arrow_back"
+          className="ml-5"
           onClick={goBack}
           disabled={!prevEnabled.get()}
         />
         <Icon
           data-testid="history-forward"
-          svg="flat_arrow"
+          material="arrow_forward"
           className="ml-5"
           onClick={goForward}
           disabled={!nextEnabled.get()}