diff --git a/.gitignore b/.gitignore
index 76a84fa..328d185 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 bower_components
 .DS_Store
+.idea/
\ No newline at end of file
diff --git a/README.md b/README.md
index c7400e3..4a10312 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,46 @@ You can completely change the design. All the magic is hidden inside two CSS cla
 }
 ```
 
+## Sizes
+
+You can change the sizes of the switch element via size. Giving it a value of small or large will result in adding switchery-small or switchery-large classes respectively, which will change the switch size.
+
+Not using this property will render the default sized switch element.
+
+```html
+<form>
+  <switch id="enabled" name="enabled" ng-model="enabled" size="small" class="green"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+```html
+<form>
+  <switch id="enabled" name="enabled" ng-model="enabled" size="small" class="green"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+Alternatively you could just use a class attribute of `class="sm"` or `class="lg"`, which will change the switch size.
+
+Again, not using size element or class attributes property will render the default sized switch element.
+
+```html
+<form>
+  <switch class="sm" id="enabled" name="enabled" ng-model="enabled"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+```html
+<form>
+  <switch class="lg" id="enabled" name="enabled" ng-model="enabled"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+![YoomJS](https://raw.githubusercontent.com/EskoCruz/angular-ui-switch/master/switch-size.png)
+
 ## Publishing
 
 1. Update version in `package.json` and `bower.json`.
diff --git a/angular-ui-switch.css b/angular-ui-switch.css
index d5bcdf2..f8085b6 100644
--- a/angular-ui-switch.css
+++ b/angular-ui-switch.css
@@ -80,3 +80,37 @@
   opacity: .50;
   cursor: not-allowed;
 }
+
+
+/* Switchery sizes. */
+/* Switchery size shorthand classes */
+
+.switchery-small, .sm {
+  border-radius: 20px;
+  height: 20px;
+  width: 33px;
+}
+
+.switchery-small > small, .sm > small {
+  height: 20px;
+  width: 20px;
+}
+
+.switch.switchery-small.checked small, .switch.sm.checked small {
+  left: 13px;
+}
+
+.switchery-large, .lg {
+  border-radius: 40px;
+  height: 40px;
+  width: 66px;
+}
+
+.switchery-large > small, .lg > small {
+  height: 40px;
+  width: 40px;
+}
+
+.switch.switchery-large.checked small, .switch.lg.checked small {
+  left: 26px;
+}
\ No newline at end of file
diff --git a/angular-ui-switch.js b/angular-ui-switch.js
index 9a6b591..1dc0e90 100644
--- a/angular-ui-switch.js
+++ b/angular-ui-switch.js
@@ -8,7 +8,9 @@ angular.module('uiSwitch', [])
   , template: function(element, attrs) {
       var html = '';
       html += '<span';
-      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"';
+      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '');
+      html +=   attrs.size ? ' switchery-' + attrs.size : '';  /*switch size from small to large*/
+      html +=   '"';
       html +=   attrs.ngModel ? ' ng-click="' + attrs.disabled + ' ? ' + attrs.ngModel + ' : ' + attrs.ngModel + '=!' + attrs.ngModel + (attrs.ngChange ? '; ' + attrs.ngChange + '()"' : '"') : '';
       html +=   ' ng-class="{ checked:' + attrs.ngModel + ', disabled:' + attrs.disabled + ' }"';
       html +=   '>';
diff --git a/angular-ui-switch.min.css b/angular-ui-switch.min.css
index a52d377..fcfd9b8 100644
--- a/angular-ui-switch.min.css
+++ b/angular-ui-switch.min.css
@@ -1 +1 @@
-.switch{background:#fff;border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;height:30px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{background:#fff;border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;height:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;position:absolute;right:10%;top:25%;z-index:0;color:#A9A9A9}.switch .on{display:none;z-index:0;color:#fff;position:absolute;top:25%;left:9%}.switch.checked .off{display:none}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed}
+.switch,.switch small{background:#fff;height:30px}.switch{border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch .off,.switch .on{z-index:0;position:absolute;top:25%}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;right:10%;color:#A9A9A9}.switch .on,.switch.checked .off{display:none}.switch .on{color:#fff;left:9%}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed}.sm,.switchery-small{border-radius:20px;height:20px;width:33px}.sm>small,.switchery-small>small{height:20px;width:20px}.switch.sm.checked small,.switch.switchery-small.checked small{left:13px}.lg,.switchery-large{border-radius:40px;height:40px;width:66px}.lg>small,.switchery-large>small{height:40px;width:40px}.switch.lg.checked small,.switch.switchery-large.checked small{left:26px}
\ No newline at end of file
diff --git a/angular-ui-switch.min.js b/angular-ui-switch.min.js
index 6f6da0f..22dcb8b 100644
--- a/angular-ui-switch.min.js
+++ b/angular-ui-switch.min.js
@@ -1 +1 @@
-angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="<span",s+=' class="switch'+(e.class?" "+e.class:"")+'"',s+=e.ngModel?' ng-click="'+e.disabled+" ? "+e.ngModel+" : "+e.ngModel+"=!"+e.ngModel+(e.ngChange?"; "+e.ngChange+'()"':'"'):"",s+=' ng-class="{ checked:'+e.ngModel+", disabled:"+e.disabled+' }"',s+=">",s+="<small></small>",s+='<input type="checkbox"',s+=e.id?' id="'+e.id+'"':"",s+=e.name?' name="'+e.name+'"':"",s+=e.ngModel?' ng-model="'+e.ngModel+'"':"",s+=' style="display:none" />',s+='<span class="switch-text">',s+=e.on?'<span class="on">'+e.on+"</span>":"",s+=e.off?'<span class="off">'+e.off+"</span>":" ",s+="</span>"}}});
\ No newline at end of file
+angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="<span",s+=' class="switch'+(e["class"]?" "+e["class"]:""),s+=e.size?" switchery-"+e.size:"",s+='"',s+=e.ngModel?' ng-click="'+e.disabled+" ? "+e.ngModel+" : "+e.ngModel+"=!"+e.ngModel+(e.ngChange?"; "+e.ngChange+'()"':'"'):"",s+=' ng-class="{ checked:'+e.ngModel+", disabled:"+e.disabled+' }"',s+=">",s+="<small></small>",s+='<input type="checkbox"',s+=e.id?' id="'+e.id+'"':"",s+=e.name?' name="'+e.name+'"':"",s+=e.ngModel?' ng-model="'+e.ngModel+'"':"",s+=' style="display:none" />',s+='<span class="switch-text">',s+=e.on?'<span class="on">'+e.on+"</span>":"",s+=e.off?'<span class="off">'+e.off+"</span>":" ",s+="</span>"}}});
\ No newline at end of file
diff --git a/example/app.js b/example/app.js
index 3d12135..c06fefe 100644
--- a/example/app.js
+++ b/example/app.js
@@ -5,6 +5,10 @@ angular.module('app', ['uiSwitch'])
   $scope.onOff = true;
   $scope.yesNo = true;
   $scope.disabled = true;
+  $scope.sizeSmall = true;
+  $scope.sizeLarge = true;
+  $scope.sizeClassSmall = true;
+  $scope.sizeClassLarge = true;
 
 
   $scope.changeCallback = function() {
diff --git a/example/index.html b/example/index.html
index 6adb029..fbbdf1b 100644
--- a/example/index.html
+++ b/example/index.html
@@ -46,6 +46,38 @@
     <p>
         Enabled: {{ disabled }}
     </p>
+    <!--Examples of using switch small. -->
+    <switch size="small" name="sizeSmall" ng-model="sizeSmall" ></switch>
+    <p>
+        <button ng-click="sizeSmall=!sizeSmall">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeSmall }}
+    </p>
+    <!--Examples of using switch large. -->
+    <switch size="large" name="sizeLarge" ng-model="sizeLarge"></switch>
+    <p>
+        <button ng-click="sizeLarge=!sizeLarge">Toggle</button>
+    </p>
+    <p>
+      Enabled: {{ sizeLarge }}
+    </p>
+    <!--Examples of using switch class sm for small. -->
+    <switch class="sm" name="sizeClassSmall" ng-model="sizeClassSmall"></switch>
+    <p>
+        <button ng-click="sizeClassSmall=!sizeClassSmall">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeClassSmall }}
+    </p>
+    <!--Examples of using switch class lg for large. -->
+    <switch class="lg" name="sizeClassLarge" ng-model="sizeClassLarge"></switch>
+    <p>
+        <button ng-click="sizeClassLarge=!sizeClassLarge">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeClassLarge }}
+    </p>
   </form>
 
 </body>
diff --git a/switch-size.png b/switch-size.png
new file mode 100644
index 0000000..5efbede
Binary files /dev/null and b/switch-size.png differ