diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 8e972020234b5e1975353542a45f620c07819525..641f35f160971b3b66eac3e050d633374ee1f947 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -302,10 +302,16 @@ lex
     width: 22px;
     color: $gray-darkest;
 
-    .fa {
+    svg {
       position: absolute;
       top: 50%;
-      margin-top: (-15px / 2);
+      margin-top: (-11px / 2);
+    }
+
+    &:hover {
+      path {
+        fill: $gray-darkest;
+      }
     }
   }
 
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index 7907fdfa81073bdf54449e3a46cfcce2108dff1a..9616ee5b795ce0c7aabd995291abbfc83a994f1d 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -14,7 +14,7 @@
           href: "#",
           "@click.prevent" => "closeSidebar",
           "aria-label" => "Toggle sidebar" }
-          = icon("times")
+          = custom_icon("icon_close", size: 15)
       .js-issuable-update
         = render "projects/boards/components/sidebar/assignee"
         = render "projects/boards/components/sidebar/milestone"
diff --git a/app/views/shared/icons/_icon_close.svg b/app/views/shared/icons/_icon_close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9d62012518be92615105796f7ef3810af8b144b4
--- /dev/null
+++ b/app/views/shared/icons/_icon_close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path d="M9,7.5l5.83-5.91a.48.48,0,0,0,0-.69L14.11.15a.46.46,0,0,0-.68,0l-5.93,6L1.57.15a.46.46,0,0,0-.68,0L.15.9a.48.48,0,0,0,0,.69L6,7.5.15,13.41a.48.48,0,0,0,0,.69l.74.75a.46.46,0,0,0,.68,0l5.93-6,5.93,6a.46.46,0,0,0,.68,0l.74-.75a.48.48,0,0,0,0-.69Z"/></svg>
\ No newline at end of file