diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 9227c78f88..53969bd04d 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -8,9 +8,16 @@ $search-bar-ios-padding:                  0 8px !default;
 $search-bar-ios-input-height:             28px !default;
 $search-bar-ios-input-text-color:         #9D9D9D !default;
 $search-bar-ios-input-background-color:   #FFFFFF !default;
-$search-bar-ios-input-icon-color:         #767676 !default;
-$search-bar-ios-input-background-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
-$search-bar-ios-background-size:          13px 13px !default;
+$search-bar-ios-input-transition:         all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
+
+$search-bar-ios-input-search-icon-color:  #767676 !default;
+$search-bar-ios-input-search-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $search-bar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+$search-bar-ios-input-search-icon-size:   13px !default;
+
+$search-bar-ios-input-close-icon-color:   #8F8E94 !default;
+$search-bar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+$search-bar-ios-input-close-icon-size:    17px !default;
+
 
 .search-bar {
   padding: $search-bar-ios-padding;
@@ -18,14 +25,15 @@ $search-bar-ios-background-size:          13px 13px !default;
   border-bottom: 1px solid $search-bar-ios-border-color;
 }
 
-.search-bar-icon {
-  width: 100%;
-  height: 13px;
+.search-bar-search-icon {
+  width: $search-bar-ios-input-search-icon-size + 1;
+  height: $search-bar-ios-input-search-icon-size + 1;
 
-  transform: translateX(calc(50% - 60px));
+  transform: translateX(calc(50% + 90px));
+  transition: $search-bar-ios-input-transition;
 
-  @include svg-background-image($search-bar-ios-input-background-svg);
-  background-size: $search-bar-ios-background-size;
+  @include svg-background-image($search-bar-ios-input-search-icon-svg);
+  background-size: $search-bar-ios-input-search-icon-size;
   background-repeat: no-repeat;
   position: absolute;
   left: 10px;
@@ -45,21 +53,31 @@ $search-bar-ios-background-size:          13px 13px !default;
   background-repeat: no-repeat;
   background-position: 8px center;
 
+  transition: $search-bar-ios-input-transition;
+
   @include calc(padding-left, "50% - 28px");
 }
 
+.search-bar-close-icon {
+  width: $search-bar-ios-input-close-icon-size;
+  height: $search-bar-ios-input-close-icon-size;
 
+  @include svg-background-image($search-bar-ios-input-close-icon-svg);
+  background-size: $search-bar-ios-input-close-icon-size;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: 10px;
+  top: 6px;
+}
 
 .search-bar-input-container.left-align {
-  .search-bar-icon {
+  .search-bar-search-icon {
     transform: translateX(0);
-    -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-    -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
+    transition: $search-bar-ios-input-transition;
   }
   .search-bar-input {
     padding-left: 28px;
-    -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-    -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
+    transition: $search-bar-ios-input-transition;
   }
 }
 
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index cc9bf98a6a..5177262b39 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -23,7 +23,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
 @IonicView({
   template: `
   <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
-    <div class="search-bar-icon"></div>
+    <div class="search-bar-search-icon"></div>
     <input (focus)="inputFocused()" (blur)="inputBlurred()"
     (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
     <div class="search-bar-close-icon"></div>