diff --git a/src/components/mdCheckbox/mdCheckbox.scss b/src/components/mdCheckbox/mdCheckbox.scss
index 1f54d9d..9315f3f 100644
--- a/src/components/mdCheckbox/mdCheckbox.scss
+++ b/src/components/mdCheckbox/mdCheckbox.scss
@@ -18,6 +18,21 @@ $checkbox-ripple-size: 48px;
     border: 2px solid rgba(#000, .54);
     transition: $swift-ease-out;
 
+    &:after {
+      width: 6px;
+      height: 13px;
+      position: absolute;
+      top: 0;
+      left: 5px;
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      opacity: 0;
+      transform: rotate(45deg) scale3D(.2, .2, 1);
+      transition: $swift-ease-in;
+      content: " ";
+    }
+
     input {
       position: absolute;
       left: -999em;
@@ -46,29 +61,14 @@ $checkbox-ripple-size: 48px;
     height: $checkbox-size;
     line-height: $checkbox-size;
   }
-
-  .md-icon {
-    width: $checkbox-size;
-    min-width: 0;
-    height: $checkbox-size;
-    min-height: 0;
-    position: absolute;
-    top: 4px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    transform: scale3D(.3, .3, 1);
-    color: #fff;
-    font-size: $checkbox-size - 4px;
-    transition: $swift-ease-in;
-  }
 }
 
 .md-checkbox.md-checked {
-  .md-icon {
-    opacity: 1;
-    transform: scale3D(1, 1, 1);
-    transition: $swift-ease-out;
+  .md-checkbox-container {
+    &:after {
+      opacity: 1;
+      transform: rotate(45deg) scale3D(1, 1, 1);
+      transition: $swift-ease-out;
+    }
   }
 }
diff --git a/src/components/mdCheckbox/mdCheckbox.vue b/src/components/mdCheckbox/mdCheckbox.vue
index f2baaf7..6605e95 100644
--- a/src/components/mdCheckbox/mdCheckbox.vue
+++ b/src/components/mdCheckbox/mdCheckbox.vue
@@ -2,8 +2,6 @@
   <div class="md-checkbox" :class="classes">
     <div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple>
       <input type="checkbox" v-model="model" :name="name" :id="id" :disabled="disabled" :value="value">
-
-      <md-icon>check</md-icon>
     </div>
 
     <label :for="id || name" class="md-checkbox-label">
diff --git a/src/docs/pages/Checkbox.vue b/src/docs/pages/Checkbox.vue
index 232c70a..d5d252f 100644
--- a/src/docs/pages/Checkbox.vue
+++ b/src/docs/pages/Checkbox.vue
@@ -2,7 +2,21 @@
   <section>
     <h2 class="title">Checkbox</h2>
 
-    <md-checkbox :model.sync="checked" id="my-test" name="my-test">My beautiful checkbox</md-checkbox>
+    <div>
+      <md-checkbox :model.sync="checked0" id="my-test0" name="my-test0">My beautiful checkbox</md-checkbox>
+    </div>
+
+    <div>
+      <md-checkbox :model.sync="checked1" id="my-test1" name="my-test1" v-md-theme="'indigo'">My beautiful checkbox</md-checkbox>
+    </div>
+
+    <div>
+      <md-checkbox :model.sync="checked2" id="my-test2" name="my-test2" v-md-theme="'blue'">My beautiful checkbox</md-checkbox>
+    </div>
+
+    <div>
+      <md-checkbox :model.sync="checked3" id="my-test3" name="my-test3" v-md-theme="'orange'">My beautiful checkbox</md-checkbox>
+    </div>
   </section>
 </template>
 
@@ -16,7 +30,10 @@
   export default {
     data() {
       return {
-        checked: false
+        checked0: true,
+        checked1: true,
+        checked2: true,
+        checked3: true
       };
     }
   };