diff --git a/web/components/clear-search-button.react.js b/web/components/clear-search-button.react.js
--- a/web/components/clear-search-button.react.js
+++ b/web/components/clear-search-button.react.js
@@ -1,10 +1,9 @@
 // @flow
 
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
+import SWMansionIcon from '../SWMansionIcon.react';
 import css from './search.css';
 
 type ClearSearchButtonProps = {
@@ -19,7 +18,7 @@
   });
   return (
     <button className={searchClassNames} onClick={onClick}>
-      <FontAwesomeIcon icon={faTimes} />
+      <SWMansionIcon icon="cross" size={12} />
     </button>
   );
 }
diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -3,29 +3,39 @@
   display: flex;
   align-items: center;
   margin: 1rem;
+  border-radius: 16px;
+}
+
+div.searchIcon {
+  display: flex;
+  margin: 8px;
+  color: var(--search-icon-color);
 }
 
 input.searchInput {
-  background-color: var(--text-input-bg);
-  font-size: var(--s-font-14);
-  padding: 1rem;
+  background-color: transparent;
+  font-size: var(--m-font-16);
+  line-height: 1.5;
+  padding: 12px 0;
   flex: 1;
   border: none;
-  color: var(--text-input-color);
+  color: var(--search-input-color);
   outline: none;
 }
 
 input.searchInput::placeholder {
-  color: var(--text-input-placeholder);
+  color: var(--search-input-placeholder);
 }
 
 button.clearSearch {
-  color: var(--text-input-color);
+  color: var(--search-clear-color);
   transition: ease-in-out 0.15s;
   border: none;
-  padding: 0 1rem;
-  font-size: var(--m-font-16);
-  background: none;
+  background: var(--search-clear-bg);
+  border-radius: 50%;
+  display: flex;
+  padding: 6px;
+  margin: 8px;
 }
 
 button.clearSearchDisabled {
diff --git a/web/components/search.react.js b/web/components/search.react.js
--- a/web/components/search.react.js
+++ b/web/components/search.react.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import SWMansionIcon from '../SWMansionIcon.react';
 import ClearSearchButton from './clear-search-button.react';
 import css from './search.css';
 
@@ -29,6 +30,9 @@
 
   return (
     <div className={css.searchContainer}>
+      <div className={css.searchIcon}>
+        <SWMansionIcon size={24} icon="search" />
+      </div>
       <input
         className={css.searchInput}
         onChange={onChange}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -113,4 +113,9 @@
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
+  --search-clear-color: var(--shades-white-100);
+  --search-clear-bg: var(--shades-black-70);
+  --search-input-color: var(--shades-white-100);
+  --search-input-placeholder: var(--shades-black-60);
+  --search-icon-color: var(--shades-black-60);
 }