diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 9247b0cff..a27bf4f8d 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -197,6 +197,12 @@
             var input = this.$('input.search');
             if (input.val().length > 0) {
                 input.addClass('active');
+                var textDir = window.getComputedStyle(input[0]).direction;
+                if (textDir === 'ltr') {
+                    input.removeClass('rtl').addClass('ltr');
+                } else if (textDir === 'rtl') {
+                    input.removeClass('ltr').addClass('rtl');
+                }
             } else {
                 input.removeClass('active');
             }
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 5fefe13d6..ee4515c98 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -104,7 +104,7 @@
 
 input.search {
   border: none;
-  padding: 0 10px 0 65px;
+  padding: 0 $search-padding-right 0 $search-padding-left;
   margin: 0;
   outline: 0;
   height: $search-height;
@@ -117,13 +117,24 @@ input.search {
 
   &.active {
     outline: solid 1px $blue;
+    background-image: url('/images/x.svg');
+    background-repeat: no-repeat;
+    background-size: $search-x-size;
+
+    &.ltr {
+      background-position : right $search-padding-right center;
+    }
+
+    &.rtl {
+      background-position : left $search-padding-left center;
+    }
   }
 
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
     display: block;
-    width: 16px;
-    height: 16px;
+    width: $search-x-size;
+    height: $search-x-size;
     background: url('/images/x.svg') no-repeat center;
     background-size: cover;
   }
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index 6967fc9d1..a6b84e4c2 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -49,9 +49,12 @@ $ios-border-color: rgba(0,0,0,0.1);
     border-radius: 5px;
     width: 220px;
     height: 34px;
-    padding-left: 30px;
+    padding-left: $search-padding-left-ios;
     line-height: 34px;
     background-color: #dddddd;
+    &.active.rtl {
+      background-position : left $search-padding-left-ios center;
+    }
   }
   .conversation-header {
     background-color: $grey_l;
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 2c7afa040..195ea8af4 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -36,6 +36,10 @@ $button-height: 24px;
 $header-color: $blue;
 
 $search-height: 36px;
+$search-padding-right: 10px;
+$search-padding-left: 65px;
+$search-padding-left-ios: 30px;
+$search-x-size: 16px;
 
 $unread-badge-size: 21px;
 $loading-height: 16px;
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index a8a8d7856..407e26898 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -110,6 +110,9 @@ $text-dark: #CCCCCC;
       background: url('/images/x_white.svg') no-repeat center;
       background-size: cover;
     }
+    &.active.ltr, &.active.rtl {
+      background-image: url('/images/x_white.svg');
+    }
   }
   .bubble {
     padding: 9px 12px;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 625082f2f..23a1186ba 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -818,7 +818,14 @@ input.search {
   font-size: inherit;
   position: relative; }
   input.search.active {
-    outline: solid 1px #2090ea; }
+    outline: solid 1px #2090ea;
+    background-image: url("/images/x.svg");
+    background-repeat: no-repeat;
+    background-size: 16px; }
+    input.search.active.ltr {
+      background-position: right 10px center; }
+    input.search.active.rtl {
+      background-position: left 65px center; }
   input.search::-webkit-search-cancel-button {
     -webkit-appearance: none;
     display: block;
@@ -1455,6 +1462,8 @@ li.entry .error-icon-container {
   padding-left: 30px;
   line-height: 34px;
   background-color: #dddddd; }
+  .ios input.search.active.rtl {
+    background-position: left 30px center; }
 .ios .conversation-header {
   background-color: #f3f3f3;
   color: #454545;
@@ -1834,6 +1843,8 @@ li.entry .error-icon-container {
     .android-dark .search::-webkit-search-cancel-button {
       background: url("/images/x_white.svg") no-repeat center;
       background-size: cover; }
+    .android-dark .search.active.ltr, .android-dark .search.active.rtl {
+      background-image: url("/images/x_white.svg"); }
   .android-dark .bubble {
     padding: 9px 12px;
     border-radius: 5px;