diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index ae90ff896e..40d50d5ed7 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -963,15 +963,17 @@ address {
   position: relative;
   display: block;
   margin-bottom: -1px;
+  border-top: 1px solid #dddddd;
   z-index: 2;
   background-color: white;
-  border: 1px solid #dddddd; }
+  /*  // Align icons to the right
+    > i:last-child {
+      float: right;
+    }*/ }
   .list-item:last-child {
     margin-bottom: 0; }
   .list-item > .badge {
     float: right; }
-  .list-item > i:last-child {
-    float: right; }
   .list-item > .badge + .badge {
     margin-right: 5px; }
   .list-item.active, .list-item.active:hover, .list-item.active:focus {
@@ -1108,15 +1110,67 @@ a.list-item {
 .list-item-content {
   position: relative;
   background-color: #fff;
+  border: 1px solid #dddddd;
   z-index: 2;
+  margin-top: -1px;
   padding: 15px;
-  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-  .list-item-content > i:last-child {
-    float: right; }
-  .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
-    float: right; }
-  .list-item-content > .toggle:last-child {
-    margin-top: -5px; }
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  /*  // Align icons
+    > i:first-child {
+      float: left;
+    }
+    > i:last-child {
+      float: right;
+    }
+  
+    // Make every last form element go to the right of the item
+  
+    > .toggle:last-child, input:last-child, > button:last-child {
+      float: right;
+    }
+    > .toggle:last-child {
+      margin-top: -5px;
+    }*/ }
+
+/**
+ * Left-side icon
+ */
+.list-icon-left .list-item-content {
+  padding-left: 60px; }
+
+/**
+ * Right-side icon
+ */
+.list-icon-right .list-item-content {
+  padding-right: 60px; }
+
+.align-icon-left, .align-icon-right {
+  position: absolute;
+  top: 11px;
+  z-index: 3;
+  width: 32px;
+  height: 32px;
+  font-size: 28px; }
+
+.align-icon-left {
+  left: 12px; }
+  .align-icon-left:after {
+    position: absolute;
+    width: 56px;
+    height: 4px;
+    left: -12px;
+    top: -13px;
+    background: white;
+    content: ' '; }
+
+.list-item:first-child .align-icon-left:after {
+  display: none; }
+
+.item-opened .align-icon-left:after {
+  display: none; }
+
+.align-icon-right {
+  right: 12px; }
 
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
@@ -1188,18 +1242,6 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
-/**
- * Right-side icon that reused by components like radio buttons
- */
-.list-item-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  padding: 13px;
-  height: 100%;
-  font-size: 24px; }
-
 /**
  * A list divider.
  */
@@ -1521,9 +1563,16 @@ input[type="checkbox"][readonly] {
   /* give some room to the right for the checkmark icon */
   padding-right: 60px; }
 
-.radio-buttton-list .list-item-icon {
+.radio-buttton-list .radio-button-icon {
   /* checkmark icon will be hidden by default */
-  visibility: hidden; }
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  visibility: hidden;
+  padding: 13px;
+  height: 100%;
+  font-size: 24px; }
 
 .radio-buttton-list input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
@@ -1531,7 +1580,7 @@ input[type="checkbox"][readonly] {
   .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
     /* style the list item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+  .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
@@ -1977,6 +2026,46 @@ a.button {
   animation: fadein 0.5s;
   -webkit-animation: fadein 0.5s; }
 
+.fill-icon {
+  background: black;
+  color: white !important;
+  border-radius: 6px; }
+  .fill-icon.align-icon-left, .fill-icon.align-icon-right {
+    position: absolute;
+    z-index: 3;
+    padding: 4px 3px;
+    width: 30px;
+    height: 31px;
+    font-size: 24px; }
+  .fill-icon.brand-default {
+    background: white; }
+  .fill-icon.brand-secondary {
+    background: whitesmoke; }
+  .fill-icon.brand-primary {
+    background: #4a87ee; }
+  .fill-icon.brand-info {
+    background: #43cee6; }
+  .fill-icon.brand-success {
+    background: #66cc33; }
+  .fill-icon.brand-warning {
+    background: #f0b840; }
+  .fill-icon.brand-danger {
+    background: #ef4e3a; }
+  .fill-icon.brand-dark {
+    background: #444444; }
+  .fill-icon.gray-darker {
+    background: #222222; }
+  .fill-icon.gray-dark {
+    background: #333333; }
+  .fill-icon.gray {
+    background: #555555; }
+  .fill-icon.gray-light {
+    background: #999999; }
+  .fill-icon.gray-lighter {
+    background: #eeeeee; }
+  .fill-icon.white {
+    background: white; }
+
 .hidden,
 .hide {
   display: none !important; }
@@ -2016,24 +2105,50 @@ a.button {
 .padding-horizontal {
   padding-left: 10px; }
 
-.margin {
-  margin: 10px; }
-
-.margin-top,
-.margin-vertical {
-  margin-top: 10px; }
-
-.margin-right,
-.margin-horizontal {
-  margin-right: 10px; }
-
-.margin-bottom,
-.margin-vertical {
-  margin-bottom: 10px; }
-
-.margin-left,
-.margin-horizontal {
-  margin-left: 10px; }
-
 .rounded {
   border-radius: 4px; }
+
+.brand-default {
+  color: white; }
+
+.brand-secondary {
+  color: whitesmoke; }
+
+.brand-primary {
+  color: #4a87ee; }
+
+.brand-info {
+  color: #43cee6; }
+
+.brand-success {
+  color: #66cc33; }
+
+.brand-warning {
+  color: #f0b840; }
+
+.brand-danger {
+  color: #ef4e3a; }
+
+.brand-dark {
+  color: #444444; }
+
+.black {
+  color: black; }
+
+.gray-darker {
+  color: #222222; }
+
+.gray-dark {
+  color: #333333; }
+
+.gray {
+  color: #555555; }
+
+.gray-light {
+  color: #999999; }
+
+.gray-lighter {
+  color: #eeeeee; }
+
+.white {
+  color: white; }
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index cf0d388c7a..5b10536399 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -160,6 +160,12 @@
    * Slide left and right and be dragged to support different
    * UI interactions.
    */
+  /**
+   * Left-side icon
+   */
+  /**
+   * Right-side icon
+   */
   /**
    * The left-side edit area of a complex list item. This area shows
    * whe the list item is in edit mode.
@@ -168,9 +174,6 @@
    * The hidden right-side buttons that can be exposed under a list item
    * with dragging.
    */
-  /**
-   * Right-side icon that reused by components like radio buttons
-   */
   /**
    * A list divider.
    */
@@ -1674,15 +1677,17 @@
     position: relative;
     display: block;
     margin-bottom: -1px;
+    border-top: 1px solid #dddddd;
     z-index: 2;
     background-color: white;
-    border: 1px solid #dddddd; }
+    /*  // Align icons to the right
+      > i:last-child {
+        float: right;
+      }*/ }
     .ionic .list-item:last-child {
       margin-bottom: 0; }
     .ionic .list-item > .badge {
       float: right; }
-    .ionic .list-item > i:last-child {
-      float: right; }
     .ionic .list-item > .badge + .badge {
       margin-right: 5px; }
     .ionic .list-item.active, .ionic .list-item.active:hover, .ionic .list-item.active:focus {
@@ -1807,15 +1812,54 @@
   .ionic .list-item-content {
     position: relative;
     background-color: #fff;
+    border: 1px solid #dddddd;
     z-index: 2;
+    margin-top: -1px;
     padding: 15px;
-    -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-    .ionic .list-item-content > i:last-child {
-      float: right; }
-    .ionic .list-item-content > .toggle:last-child, .ionic .list-item-content input:last-child, .ionic .list-item-content > button:last-child {
-      float: right; }
-    .ionic .list-item-content > .toggle:last-child {
-      margin-top: -5px; }
+    -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+    /*  // Align icons
+      > i:first-child {
+        float: left;
+      }
+      > i:last-child {
+        float: right;
+      }
+    
+      // Make every last form element go to the right of the item
+    
+      > .toggle:last-child, input:last-child, > button:last-child {
+        float: right;
+      }
+      > .toggle:last-child {
+        margin-top: -5px;
+      }*/ }
+  .ionic .list-icon-left .list-item-content {
+    padding-left: 60px; }
+  .ionic .list-icon-right .list-item-content {
+    padding-right: 60px; }
+  .ionic .align-icon-left, .ionic .align-icon-right {
+    position: absolute;
+    top: 11px;
+    z-index: 3;
+    width: 32px;
+    height: 32px;
+    font-size: 28px; }
+  .ionic .align-icon-left {
+    left: 12px; }
+    .ionic .align-icon-left:after {
+      position: absolute;
+      width: 56px;
+      height: 4px;
+      left: -12px;
+      top: -13px;
+      background: white;
+      content: ' '; }
+  .ionic .list-item:first-child .align-icon-left:after {
+    display: none; }
+  .ionic .item-opened .align-icon-left:after {
+    display: none; }
+  .ionic .align-icon-right {
+    right: 12px; }
   .ionic .list-item-sliding {
     -webkit-transition: -webkit-transform 0.1s ease-in-out; }
   .ionic .list-item-reordering {
@@ -1872,14 +1916,6 @@
       height: 100%;
       border-radius: 0;
       border: none; }
-  .ionic .list-item-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 3;
-    padding: 13px;
-    height: 100%;
-    font-size: 24px; }
   .ionic .list-divider {
     padding: 5px 15px;
     background-color: whitesmoke;
@@ -2214,16 +2250,23 @@
   .ionic .radio-buttton-list .list-item-content {
     /* give some room to the right for the checkmark icon */
     padding-right: 60px; }
-  .ionic .radio-buttton-list .list-item-icon {
+  .ionic .radio-buttton-list .radio-button-icon {
     /* checkmark icon will be hidden by default */
-    visibility: hidden; }
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    visibility: hidden;
+    padding: 13px;
+    height: 100%;
+    font-size: 24px; }
   .ionic .radio-buttton-list input[type="radio"] {
     /* hide any radio button inputs elements (the ugly circles) */
     display: none; }
     .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
       /* style the list item content when its checked */
       background: #f7f7f7; }
-    .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+    .ionic .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
       /* show the checkmark icon when its checked */
       visibility: visible; }
   .ionic input[type="range"] {
@@ -2623,6 +2666,45 @@
     opacity: 0;
     animation: fadein 0.5s;
     -webkit-animation: fadein 0.5s; }
+  .ionic .fill-icon {
+    background: black;
+    color: white !important;
+    border-radius: 6px; }
+    .ionic .fill-icon.align-icon-left, .ionic .fill-icon.align-icon-right {
+      position: absolute;
+      z-index: 3;
+      padding: 4px 3px;
+      width: 30px;
+      height: 31px;
+      font-size: 24px; }
+    .ionic .fill-icon.brand-default {
+      background: white; }
+    .ionic .fill-icon.brand-secondary {
+      background: whitesmoke; }
+    .ionic .fill-icon.brand-primary {
+      background: #4a87ee; }
+    .ionic .fill-icon.brand-info {
+      background: #43cee6; }
+    .ionic .fill-icon.brand-success {
+      background: #66cc33; }
+    .ionic .fill-icon.brand-warning {
+      background: #f0b840; }
+    .ionic .fill-icon.brand-danger {
+      background: #ef4e3a; }
+    .ionic .fill-icon.brand-dark {
+      background: #444444; }
+    .ionic .fill-icon.gray-darker {
+      background: #222222; }
+    .ionic .fill-icon.gray-dark {
+      background: #333333; }
+    .ionic .fill-icon.gray {
+      background: #555555; }
+    .ionic .fill-icon.gray-light {
+      background: #999999; }
+    .ionic .fill-icon.gray-lighter {
+      background: #eeeeee; }
+    .ionic .fill-icon.white {
+      background: white; }
   .ionic .hidden,
   .ionic .hide {
     display: none !important; }
@@ -2653,22 +2735,38 @@
   .ionic .padding-left,
   .ionic .padding-horizontal {
     padding-left: 10px; }
-  .ionic .margin {
-    margin: 10px; }
-  .ionic .margin-top,
-  .ionic .margin-vertical {
-    margin-top: 10px; }
-  .ionic .margin-right,
-  .ionic .margin-horizontal {
-    margin-right: 10px; }
-  .ionic .margin-bottom,
-  .ionic .margin-vertical {
-    margin-bottom: 10px; }
-  .ionic .margin-left,
-  .ionic .margin-horizontal {
-    margin-left: 10px; }
   .ionic .rounded {
     border-radius: 4px; }
+  .ionic .brand-default {
+    color: white; }
+  .ionic .brand-secondary {
+    color: whitesmoke; }
+  .ionic .brand-primary {
+    color: #4a87ee; }
+  .ionic .brand-info {
+    color: #43cee6; }
+  .ionic .brand-success {
+    color: #66cc33; }
+  .ionic .brand-warning {
+    color: #f0b840; }
+  .ionic .brand-danger {
+    color: #ef4e3a; }
+  .ionic .brand-dark {
+    color: #444444; }
+  .ionic .black {
+    color: black; }
+  .ionic .gray-darker {
+    color: #222222; }
+  .ionic .gray-dark {
+    color: #333333; }
+  .ionic .gray {
+    color: #555555; }
+  .ionic .gray-light {
+    color: #999999; }
+  .ionic .gray-lighter {
+    color: #eeeeee; }
+  .ionic .white {
+    color: white; }
   .ionic .platform-ios7 .bar-header {
     height: 64px; }
     .ionic .platform-ios7 .bar-header > * {
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 88818109de..f20819d511 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2072,15 +2072,17 @@ address {
   position: relative;
   display: block;
   margin-bottom: -1px;
+  border-top: 1px solid #dddddd;
   z-index: 2;
   background-color: white;
-  border: 1px solid #dddddd; }
+  /*  // Align icons to the right
+    > i:last-child {
+      float: right;
+    }*/ }
   .list-item:last-child {
     margin-bottom: 0; }
   .list-item > .badge {
     float: right; }
-  .list-item > i:last-child {
-    float: right; }
   .list-item > .badge + .badge {
     margin-right: 5px; }
   .list-item.active, .list-item.active:hover, .list-item.active:focus {
@@ -2217,15 +2219,67 @@ a.list-item {
 .list-item-content {
   position: relative;
   background-color: #fff;
+  border: 1px solid #dddddd;
   z-index: 2;
+  margin-top: -1px;
   padding: 15px;
-  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-  .list-item-content > i:last-child {
-    float: right; }
-  .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
-    float: right; }
-  .list-item-content > .toggle:last-child {
-    margin-top: -5px; }
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  /*  // Align icons
+    > i:first-child {
+      float: left;
+    }
+    > i:last-child {
+      float: right;
+    }
+  
+    // Make every last form element go to the right of the item
+  
+    > .toggle:last-child, input:last-child, > button:last-child {
+      float: right;
+    }
+    > .toggle:last-child {
+      margin-top: -5px;
+    }*/ }
+
+/**
+ * Left-side icon
+ */
+.list-icon-left .list-item-content {
+  padding-left: 60px; }
+
+/**
+ * Right-side icon
+ */
+.list-icon-right .list-item-content {
+  padding-right: 60px; }
+
+.align-icon-left, .align-icon-right {
+  position: absolute;
+  top: 11px;
+  z-index: 3;
+  width: 32px;
+  height: 32px;
+  font-size: 28px; }
+
+.align-icon-left {
+  left: 12px; }
+  .align-icon-left:after {
+    position: absolute;
+    width: 56px;
+    height: 4px;
+    left: -12px;
+    top: -13px;
+    background: white;
+    content: ' '; }
+
+.list-item:first-child .align-icon-left:after {
+  display: none; }
+
+.item-opened .align-icon-left:after {
+  display: none; }
+
+.align-icon-right {
+  right: 12px; }
 
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
@@ -2297,18 +2351,6 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
-/**
- * Right-side icon that reused by components like radio buttons
- */
-.list-item-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  padding: 13px;
-  height: 100%;
-  font-size: 24px; }
-
 /**
  * A list divider.
  */
@@ -2705,9 +2747,16 @@ input[type="checkbox"][readonly] {
   /* give some room to the right for the checkmark icon */
   padding-right: 60px; }
 
-.radio-buttton-list .list-item-icon {
+.radio-buttton-list .radio-button-icon {
   /* checkmark icon will be hidden by default */
-  visibility: hidden; }
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  visibility: hidden;
+  padding: 13px;
+  height: 100%;
+  font-size: 24px; }
 
 .radio-buttton-list input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
@@ -2715,7 +2764,7 @@ input[type="checkbox"][readonly] {
   .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
     /* style the list item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+  .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
@@ -3198,6 +3247,46 @@ a.button {
   animation: fadein 0.5s;
   -webkit-animation: fadein 0.5s; }
 
+.fill-icon {
+  background: black;
+  color: white !important;
+  border-radius: 6px; }
+  .fill-icon.align-icon-left, .fill-icon.align-icon-right {
+    position: absolute;
+    z-index: 3;
+    padding: 4px 3px;
+    width: 30px;
+    height: 31px;
+    font-size: 24px; }
+  .fill-icon.brand-default {
+    background: white; }
+  .fill-icon.brand-secondary {
+    background: whitesmoke; }
+  .fill-icon.brand-primary {
+    background: #4a87ee; }
+  .fill-icon.brand-info {
+    background: #43cee6; }
+  .fill-icon.brand-success {
+    background: #66cc33; }
+  .fill-icon.brand-warning {
+    background: #f0b840; }
+  .fill-icon.brand-danger {
+    background: #ef4e3a; }
+  .fill-icon.brand-dark {
+    background: #444444; }
+  .fill-icon.gray-darker {
+    background: #222222; }
+  .fill-icon.gray-dark {
+    background: #333333; }
+  .fill-icon.gray {
+    background: #555555; }
+  .fill-icon.gray-light {
+    background: #999999; }
+  .fill-icon.gray-lighter {
+    background: #eeeeee; }
+  .fill-icon.white {
+    background: white; }
+
 .hidden,
 .hide {
   display: none !important; }
@@ -3237,28 +3326,54 @@ a.button {
 .padding-horizontal {
   padding-left: 10px; }
 
-.margin {
-  margin: 10px; }
-
-.margin-top,
-.margin-vertical {
-  margin-top: 10px; }
-
-.margin-right,
-.margin-horizontal {
-  margin-right: 10px; }
-
-.margin-bottom,
-.margin-vertical {
-  margin-bottom: 10px; }
-
-.margin-left,
-.margin-horizontal {
-  margin-left: 10px; }
-
 .rounded {
   border-radius: 4px; }
 
+.brand-default {
+  color: white; }
+
+.brand-secondary {
+  color: whitesmoke; }
+
+.brand-primary {
+  color: #4a87ee; }
+
+.brand-info {
+  color: #43cee6; }
+
+.brand-success {
+  color: #66cc33; }
+
+.brand-warning {
+  color: #f0b840; }
+
+.brand-danger {
+  color: #ef4e3a; }
+
+.brand-dark {
+  color: #444444; }
+
+.black {
+  color: black; }
+
+.gray-darker {
+  color: #222222; }
+
+.gray-dark {
+  color: #333333; }
+
+.gray {
+  color: #555555; }
+
+.gray-light {
+  color: #999999; }
+
+.gray-lighter {
+  color: #eeeeee; }
+
+.white {
+  color: white; }
+
 .platform-ios7 .bar-header {
   height: 64px; }
   .platform-ios7 .bar-header > * {
diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss
index 51df0467f3..727ba97d55 100644
--- a/scss/ionic-ios7/ionic-ios7.scss
+++ b/scss/ionic-ios7/ionic-ios7.scss
@@ -39,4 +39,5 @@
   "../ionic/animations",
 
     // Util
+  "../ionic/icons",
   "../ionic/util";
diff --git a/scss/ionic/_icons.scss b/scss/ionic/_icons.scss
new file mode 100644
index 0000000000..cb6cbb4fe1
--- /dev/null
+++ b/scss/ionic/_icons.scss
@@ -0,0 +1,62 @@
+
+
+.fill-icon {
+  background: black;
+  color: white !important;
+  border-radius: $icon-fill-border-radius;
+
+  &.align-icon-left, 
+  &.align-icon-right {
+    position: absolute;
+    z-index: 3;
+    padding: 4px 3px;
+    width: $icon-font-size + 2;
+    height: $icon-font-size + 3;
+    font-size: $icon-font-size - 4;
+  }
+
+  &.brand-default {
+    background: $brand-default;
+  }
+  &.brand-secondary {
+    background: $brand-secondary;
+  }
+  &.brand-primary {
+    background: $brand-primary;
+  }
+  &.brand-info {
+    background: $brand-info;
+  }
+  &.brand-success {
+    background: $brand-success;
+  }
+  &.brand-warning {
+    background: $brand-warning;
+  }
+  &.brand-danger {
+    background: $brand-danger;
+  }
+  &.brand-dark {
+    background: $brand-dark;
+  }
+
+  &.gray-darker {
+    background: $gray-darker;
+  }
+  &.gray-dark {
+    background: $gray-dark;
+  }
+  &.gray {
+    background: $gray;
+  }
+  &.gray-light {
+    background: $gray-light;
+  }
+  &.gray-lighter {
+    background: $gray-lighter;
+  }
+  &.white {
+    background: $white;
+  }
+
+}
\ No newline at end of file
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index ee7e26954e..2e48f8ffb8 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -19,14 +19,14 @@
   position: relative;
   display: block;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -1px;
+  margin-bottom: $list-item-border-width * -1;
+  border-top: $list-item-border-width solid $list-item-border-color;
 
   // Make sure the borders and stuff don't get hidden
   // by children
   z-index: 2;
 
   background-color: $list-default-background;
-  border: $list-item-border;
 
   // Round the first and last items
   &:first-child {
@@ -42,10 +42,10 @@
     float: right;
   }
 
-  // Align icons to the right
+/*  // Align icons to the right
   > i:last-child {
     float: right;
-  }
+  }*/
 
   > .badge + .badge {
     margin-right: 5px;
@@ -119,16 +119,19 @@ a.list-item {
  */
 .list-item-content {
   position: relative;
-
   background-color: #fff;
+  border: $list-item-border-width solid $list-item-border-color;
 
   z-index: 2;
-
+  margin-top: $list-item-border-width * -1;
   padding: $list-item-padding;
 
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
 
-  // Align icons to the right
+/*  // Align icons
+  > i:first-child {
+    float: left;
+  }
   > i:last-child {
     float: right;
   }
@@ -140,8 +143,56 @@ a.list-item {
   }
   > .toggle:last-child {
     margin-top: -5px;
+  }*/
+}
+
+/**
+ * Left-side icon
+ */
+.list-icon-left .list-item-content {
+  padding-left: $list-item-padding * 4;
+}
+
+/**
+ * Right-side icon
+ */
+.list-icon-right .list-item-content {
+  padding-right: $list-item-padding * 4;
+}
+
+.align-icon-left, .align-icon-right {
+  position: absolute;
+  top: $list-item-padding - 4;
+  z-index: 3;
+  width: $icon-font-size + 4;
+  height: $icon-font-size + 4;
+  font-size: $icon-font-size;
+}
+
+.align-icon-left {
+  left: ($list-item-padding - 3);
+
+  &:after {
+    position: absolute;
+    width: $icon-font-size * 2;
+    height: 4px;
+    left: ($list-item-padding - 3) * -1;
+    top: ($list-item-padding * -1) + 2;
+    background: $list-default-background;
+    content: ' ';
   }
 }
+.list-item:first-child .align-icon-left:after {
+  display: none;
+}
+
+.item-opened .align-icon-left:after {
+  display: none;
+}
+
+.align-icon-right {
+  right: $list-item-padding - 3;
+}
 
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
@@ -233,20 +284,6 @@ a.list-item {
   }
 }
 
-/**
- * Right-side icon that reused by components like radio buttons
- */
-.list-item-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  padding: $list-item-padding - 2;
-  height: 100%;
-  font-size: 24px;
-}
-
-
 /**
  * A list divider.
  */
diff --git a/scss/ionic/_radio.scss b/scss/ionic/_radio.scss
index 8f4479af8a..54beb9f17d 100644
--- a/scss/ionic/_radio.scss
+++ b/scss/ionic/_radio.scss
@@ -7,9 +7,16 @@
   padding-right: $list-item-padding * 4;
 }
 
-.radio-buttton-list .list-item-icon {
+.radio-buttton-list .radio-button-icon {
   /* checkmark icon will be hidden by default */
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
   visibility: hidden;
+  padding: $list-item-padding - 2;
+  height: 100%;
+  font-size: 24px;
 }
 
 .radio-buttton-list input[type="radio"] {
@@ -21,7 +28,7 @@
     background: #f7f7f7;
   }
 
-  &:checked ~ .list-item-icon {
+  &:checked ~ .radio-button-icon {
     /* show the checkmark icon when its checked */
     visibility: visible;
   }
diff --git a/scss/ionic/_util.scss b/scss/ionic/_util.scss
index a460276bcc..ea7a8e456c 100644
--- a/scss/ionic/_util.scss
+++ b/scss/ionic/_util.scss
@@ -50,37 +50,60 @@
 }
 
 
-// Inset Margin
-// -------------------------------
-
-.margin {
-  margin: $inset-margin;
-}
-
-.margin-top,
-.margin-vertical {
-  margin-top: $inset-margin;
-}
-
-.margin-right,
-.margin-horizontal {
-  margin-right: $inset-margin;
-}
-
-.margin-bottom,
-.margin-vertical {
-  margin-bottom: $inset-margin;
-}
-
-.margin-left,
-.margin-horizontal {
-  margin-left: $inset-margin;
-}
-
-
 // Rounded
 // -------------------------------
 
 .rounded {
   border-radius: $border-radius-base;
 }
+
+// Colors
+// -------------------------------
+
+.brand-default {
+  color: $brand-default;
+}
+.brand-secondary {
+  color: $brand-secondary;
+}
+.brand-primary {
+  color: $brand-primary;
+}
+.brand-info {
+  color: $brand-info;
+}
+.brand-success {
+  color: $brand-success;
+}
+.brand-warning {
+  color: $brand-warning;
+}
+.brand-danger {
+  color: $brand-danger;
+}
+.brand-dark {
+  color: $brand-dark;
+}
+
+.black {
+  color: $black;
+}
+.gray-darker {
+  color: $gray-darker;
+}
+.gray-dark {
+  color: $gray-dark;
+}
+.gray {
+  color: $gray;
+}
+.gray-light {
+  color: $gray-light;
+}
+.gray-lighter {
+  color: $gray-lighter;
+}
+.white {
+  color: $white;
+}
+
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 166294dd5f..922bff429f 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -62,7 +62,6 @@ $base-font-family:          $sans-font-family;
 $base-background-color:     $white;
 $base-color:                #000;
 $content-padding:           10px !default;
-$inset-margin:              10px;
 $border-radius-base:        4px !default;
 $border-radius-large:       6px !default;
 $border-radius-small:       3px !default;
@@ -338,10 +337,11 @@ $tabs-dark-border-color:       $button-dark-border;
 // Lists
 // -------------------------------
 
-$list-divider-bg:       #f5f5f5;
-$list-divider-color:    #222;
-$list-item-border:      1px solid #ddd;
-$list-item-padding:     15px !default;
+$list-divider-bg:           #f5f5f5;
+$list-divider-color:        #222;
+$list-item-border-width:    1px !default;
+$list-item-border-color:    #ddd;
+$list-item-padding:         15px !default;
 
 $list-default-background: $brand-default;
 $list-default-border: #ddd;
@@ -368,6 +368,13 @@ $list-dark-background: $brand-dark;
 $list-dark-border: $brand-dark;
 
 
+// Icons
+// -------------------------------
+
+$icon-font-size:              28px !default;
+$icon-fill-border-radius:     6px !default;
+
+
 // Menus
 // -------------------------------
 
diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss
index 8920db24f2..37eb3c0673 100644
--- a/scss/ionic/ionic-scoped.scss
+++ b/scss/ionic/ionic-scoped.scss
@@ -46,6 +46,7 @@
   "animations",
 
   // Util
+  "icons",
   "util",
   "platform";
   
diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss
index 6199bf72df..ec2dbf70a7 100644
--- a/scss/ionic/ionic.scss
+++ b/scss/ionic/ionic.scss
@@ -46,5 +46,6 @@
   "animations",
 
   // Util
+  "icons",
   "util",
   "platform";
diff --git a/test/input-checkbox.html b/test/input-checkbox.html
index 017adcf362..b6e7ccf977 100644
--- a/test/input-checkbox.html
+++ b/test/input-checkbox.html
@@ -52,6 +52,10 @@
           </li>
         </ul>
 
+        <div class="padding">
+          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+        </div>
+
       </main>
 
     </div>
diff --git a/test/input-radio.html b/test/input-radio.html
index 80a9cd65d1..7e839237e3 100644
--- a/test/input-radio.html
+++ b/test/input-radio.html
@@ -28,7 +28,7 @@
             <div class="list-item-content">
               Go
             </div>
-            <div class="list-item-icon icon-checkmark"></div>
+            <div class="radio-button-icon icon-checkmark"></div>
           </label>
 
           <label class="list-item">
@@ -36,7 +36,7 @@
             <div class="list-item-content">
               Python
             </div>
-            <div class="list-item-icon icon-checkmark"></div>
+            <div class="radio-button-icon icon-checkmark"></div>
           </label>
 
         </div>
diff --git a/test/lists.html b/test/lists.html
index 9620cb63f2..0d33e5b262 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -5,90 +5,219 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
-    <section>
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Customers</h1>
+    </header>
 
-      <header class="bar bar-header bar-dark">
-        <h1 class="title">Customers</h1>
-      </header>
+    <main class="content-wrapper">
+      <div class="content has-header">
+
+        <div class="list">
+
+          <a href="#" class="list-item">
+            <div class="list-item-content">
+              Madison, WI
+            </div>
+          </a>
+
+          <a href="#" class="list-item">
+            <div class="list-item-content slide-right">
+              Driving Directions
+            </div>
+          </a>
+
+          <a href="#" class="list-item">
+            <div class="list-item-content slide-left">
+              Settings
+            </div>
+            <div class="list-item-buttons">
+             <button class="button">Button</button>
+           </div>
+          </a>
 
-      <main class="content-wrapper">
-        <div class="content has-header">
-          <ul id="list" class="list">
-            <li href="#" class="list-item">
-              <div class="list-item-content">
-                Sasafras
-                <i class="icon-arrow-right"></i>
-              </div>
-              <div class="list-item-buttons">
-                <button class="button button-danger">Delete</button>
-              </div>
-            </li>
-            <a href="#" class="list-item">
-              Candy
-              <i class="icon-arrow-right"></i>
-            </a>
-            <li class="list-divider">Other things</li>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-            <a href="#" class="list-item">
-              Cheese cords
-              <i class="icon-arrow-right"></i>
-            </a>
-          </ul>
-          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
         </div>
-      </main>
 
-    </section>
-    
-    <script src="../dist/ionic.js"></script>
+        <div class="list padding">
 
+          <a href="#" class="list-item list-icon-right">
+            <div class="list-item-content slide-right">
+              Madison, WI
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-right">
+            <div class="list-item-content slide-left">
+              Driving Directions
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+            <div class="list-item-buttons">
+             <button class="button">Button</button>
+           </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-right">
+            <div class="list-item-content">
+              Settings
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+        </div>
+
+        <div class="list padding-bottom">
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content slide-left">
+              <i class="align-icon-left icon-heart brand-danger"></i>
+              Madison, WI asdf
+            </div>
+            <div class="list-item-buttons">
+             <button class="button">Button</button>
+           </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content slide-right">
+              <i class="align-icon-left icon-image brand-warning"></i>
+              Driving Directions
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="align-icon-left icon-ios7-cog gray"></i>
+              Settings
+            </div>
+          </a>
+
+        </div>
+
+        <div class="list padding-bottom">
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content">
+              <i class="align-icon-left icon-heart brand-danger fill-icon"></i>
+              Madison, WI
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content slide-left">
+              <i class="align-icon-left icon-image brand-warning fill-icon"></i>
+              Driving Directions
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+            <div class="list-item-buttons">
+             <button class="button">Button</button>
+           </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content slide-right">
+              <i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
+              Settings
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+        </div>
+
+        <div class="list padding">
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content">
+              <i class="align-icon-left icon-heart brand-danger fill-icon"></i>
+              Madison, WI
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content">
+              <i class="align-icon-left icon-image brand-warning fill-icon"></i>
+              Driving Directions
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left list-icon-right">
+            <div class="list-item-content slide-left slide-right">
+              <i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
+              Settings
+              <i class="align-icon-right icon-chevron-right"></i>
+            </div>
+            <div class="list-item-buttons">
+             <button class="button">Button</button>
+           </div>
+          </a>
+
+        </div>
+
+        <div class="padding">
+          <button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
+          <button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
+        </div>
+
+        <div class="padding">
+          <a class="button button-secondary" href="index.html">Homepage</a>
+        </div>
+
+      </div>
+    </main>
+
+
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
-      var l = document.getElementById('list');
-      var list = new ionic.views.List({el: l});
+      $("#btn-test-left").click(function(){
+
+        if(this.isLeft) {
+          // back to normal
+          this.isLeft = false;
+          $(".slide-left").css({
+            left: "0"
+          })
+          $(".list").removeClass("item-opened");
+        } else {
+          // open
+          this.isLeft = true;
+          $(".slide-left").css({
+            left: "-72px"
+          })
+          $(".list").addClass("item-opened");
+        }
+
+
+        return false;
+      });
+
+      $("#btn-test-right").click(function(){
+
+        if(this.isRight) {
+          // back to normal
+          this.isRight = false;
+          $(".slide-right").css({
+            left: "0"
+          })
+          $(".list").removeClass("item-opened");
+        } else {
+          // open
+          this.isRight = true;
+          $(".slide-right").css({
+            left: "72px"
+          })
+          $(".list").addClass("item-opened");
+        }
+
+        return false;
+      });
     </script>
+
   </body>
 </html>