diff --git a/src/_includes/icons/symbols/close.svg b/src/_includes/icons/symbols/close.svg
new file mode 100644
index 0000000000..2723aaf244
--- /dev/null
+++ b/src/_includes/icons/symbols/close.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M7.708 7l5.147-5.15h0a.5.5 0 000-.705h0a.5.5 0 00-.706 0L7 6.292 1.85 1.145h0a.5.5 0 00-.705 0h0a.5.5 0 000 .706L6.292 7l-5.147 5.15h0a.5.5 0 000 .705h0a.5.5 0 00.706 0L7 7.708l5.15 5.147h0a.5.5 0 00.705-.706L7.708 7z" fill-rule="nonzero" stroke="#A5B0BA"/></svg>
diff --git a/src/_includes/navbar/search.html b/src/_includes/navbar/search.html
index 8a3365ac9f..74eecbe69e 100644
--- a/src/_includes/navbar/search.html
+++ b/src/_includes/navbar/search.html
@@ -1,7 +1,13 @@
 <div class="field field--expand field--icon">
-  <div class="field__icon flex flex--middle flex--center">
+  <div class="field__icon field__icon--left flex flex--middle flex--center">
     {% include icons/symbols/search.svg %}
   </div>
 
   <input class="field__input input DocsNav-search-input" type="text" placeholder="Search documentation, ex. protocolos..."/>
+
+  <div class="field__icon field__icon--right flex flex--middle flex--center">
+    <button class="field__button" data-ref="search-navbar[trigger]">
+      {% include icons/symbols/close.svg %}
+    </button>
+  </div>
 </div>
diff --git a/src/_sass/components/_field.scss b/src/_sass/components/_field.scss
index 3b7fc9ef6d..5d81ba09de 100644
--- a/src/_sass/components/_field.scss
+++ b/src/_sass/components/_field.scss
@@ -8,7 +8,7 @@
     vertical-align: middle;
     padding: 6px;
 
-    @include breakpoint(medium up)  {
+    @include breakpoint(large up)  {
       padding: 12px 20px;
     }
   }
@@ -25,24 +25,42 @@
 
     #{$this}__input {
       padding-left: 40px;
+      padding-right: 40px;
 
-      @include breakpoint(medium up)  {
+      @include breakpoint(large up)  {
         padding-left: 60px;
+        padding-right: 60px;
       }
     }
 
     #{$this}__icon {
       position: absolute;
       top: 0;
-      left: 0;
       z-index: 1;
       width: 40px;
       height: 100%;
       color: color(gray);
 
-      @include breakpoint(medium up)  {
+      @include breakpoint(large up)  {
         width: 60px;
       }
+
+      &--left {
+        left: 0;
+      }
+
+      &--right {
+        right: 0;
+      }
+    }
+
+    #{$this}__button {
+      color: color(gray);
+      cursor: pointer;
+
+      @include breakpoint(large up)  {
+        display: none;
+      }
     }
   }
 }