diff --git a/web/calendar/calendar.css b/web/calendar/calendar.css
--- a/web/calendar/calendar.css
+++ b/web/calendar/calendar.css
@@ -1,19 +1,19 @@
 a.filtersButton {
-  font-weight: 600;
-  float: left;
-  color: white;
-  background-color: rgba(68, 68, 85, 0.67);
-  padding: 8px 18px;
-  border-radius: 18px;
-  margin: 0 15px 5px 15px;
-  font-size: 16px;
+  color: var(--fg);
+  background-color: var(--filters-button-bg);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0px 9px 24px;
   cursor: pointer;
-  text-transform: uppercase;
   position: absolute;
+  border: 1px solid var(--filters-button-border);
+  border-radius: 4px;
 }
-a.filtersButton > svg {
-  padding-right: 5px;
-}
+
 div.content {
   height: 100%;
   position: relative;
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -1,7 +1,5 @@
 // @flow
 
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import dateFormat from 'dateformat';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -179,8 +177,7 @@
               onClick={this.toggleFilters}
               style={filterButtonStyle}
             >
-              <FontAwesomeIcon icon={faFilter} />
-              Filters
+              <SWMansionIcon icon="filters-2" size={16} />
             </a>
             <nav className={css.nav}>
               <a
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -203,4 +203,6 @@
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-90);
+  --filters-button-bg: #121019;
+  --filters-button-border: #211e2d;
 }