diff --git a/README.md b/README.md
index 48fecaf..19a6eb7 100644
--- a/README.md
+++ b/README.md
@@ -35,10 +35,12 @@ And
 | Properties            | Type      | Values     |
 | :---------------      | :-------  | :--------- |
 |  `bg-color`           | String    | <b>Default '#333333'</b><br> Accepts all color formats: HEX, RGB & RGBA |
-|  `position`           | String    | <b>Default 'bottom-left'</b> <br>'bottom-left', 'bottom-right', 'top-left','top-right'  |
+|  `position`           | String    | <b>Default 'bottom-left'</b> <br>Options: 'bottom-left', 'bottom-right', 'top-left','top-right'  |
+|  `position-type`           | String    | <b>Default 'fixed'</b> <br>Options: 'fixed' or 'absolute'|
 |  `z-index`            | String    | <b>Default '999'</b> <br>Set any value that suits your needs.  |
 |  `ripple-show`        | Boolean   | <b>Default true</b> <br>Options: true or false.  |
 |  `ripple-color`       | String    | <b>Default 'light'</b> <br>Options: 'light' or 'dark'.  |
+|  `icon-size`       | String    | <b>Default 'medium'</b> <br>Options: 'small', 'medium' or 'large'.  |
 |  `main-icon`       | String    | <b>Default 'add'</b> <br>Use icons from the material icon library.  |
 |  `main-tooltip`       | String    | <b>Default `null`</b>  |
 |  `actions`            | Object    | <b>[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)</b>
diff --git a/demo/App.vue b/demo/App.vue
index fe5ddc3..f19d0fd 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -61,15 +61,39 @@
                                         </div>
                                     </div>
                                     <div class="column">
-                                        <div class="field has-text-left">
-                                            <label class="label">Position</label>
-                                            <p class="control">
-                                                <span class="select">
-                                                  <select v-model="position">
-                                                    <option v-for="pos in positions">{{pos}}</option>
-                                                  </select>
-                                                </span>
-                                            </p>
+                                        <div class="field is-horizontal">
+                                            <div class="field-body">
+                                                <div class="field has-text-left">
+                                                    <label class="label">Position</label>
+                                                    <p class="control is-expanded">
+                                                        <span class="select is-fullwidth">
+                                                          <select v-model="position">
+                                                            <option v-for="pos in positions">{{pos}}</option>
+                                                          </select>
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <div class="field has-text-left">
+                                                    <label class="label">Position Type</label>
+                                                    <p class="control is-expandend">
+                                                        <span class="select is-fullwidth">
+                                                            <select v-model="positionType">
+                                                                <option v-for="type in positionTypes">{{type}}</option>
+                                                            </select>
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <div class="field has-text-left">
+                                                    <label class="label">Size</label>
+                                                    <p class="control is-expandend">
+                                                        <span class="select is-fullwidth">
+                                                            <select v-model="iconSizes">
+                                                                <option v-for="size in sizes">{{size}}</option>
+                                                            </select>
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                            </div>
                                         </div>
                                         <label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
                                             Main Icon & Tooltip
@@ -152,6 +176,8 @@
         </footer>
         <fab
                 :position="position"
+                :icon-size="iconSizes"
+                :position-type="positionType"
                 :bg-color="colors.hex"
                 :main-icon="mainIcon"
                 :main-tooltip="mainTooltip"
@@ -207,7 +233,18 @@
                     'top-right',
                     'top-left',
                 ],
+                positionTypes: [
+                    'fixed',
+                    'absolute'
+                ],
+                sizes: [
+                    'small',
+                    'medium',
+                    'large'
+                ],
                 position: 'bottom-right',
+                positionType: 'fixed',
+                iconSizes: 'medium',
                 colors: defaultProps,
                 mainIcon: 'add',
                 mainTooltip: 'Hello',
diff --git a/index.html b/index.html
index 73f0532..c61c779 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <title>vue-fab</title>
diff --git a/package.json b/package.json
index 5112ae3..041eee8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-fab",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "Vue Floating Action Button",
   "main": "src/index.js",
   "repository": {
diff --git a/src/FAB.vue b/src/FAB.vue
index b7c36ab..a1832ee 100644
--- a/src/FAB.vue
+++ b/src/FAB.vue
@@ -1,6 +1,6 @@
 <template>
     <div :id="position + '-wrapper'" class="fab-wrapper" v-on-clickaway="away"
-         :style="[pos, {zIndex: zIndex}]">
+         :style="[ pos, {zIndex: zIndex}, {position: positionType} ]">
         <div :id="position + '-action'" class="actions-container" :style="listPos">
             <transition name="fab-actions-appear"
                         :enter-active-class="transitionEnter"
@@ -16,13 +16,13 @@
                                 <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
                                     v-tooltip="{ content: action.tooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
                                     @click="toParent(action.name)" class="pointer">
-                                    <i class="material-icons">{{action.icon}}</i>
+                                    <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
                                 </li>
                             </template>
                             <template v-else>
                                 <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
                                     @click="toParent(action.name)" class="pointer">
-                                    <i class="material-icons">{{action.icon}}</i>
+                                    <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
                                 </li>
                             </template>
                         </transition>
@@ -34,32 +34,32 @@
             <template v-if="mainTooltip">
                 <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
                      v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
-                     class="fab pointer" :style="{ 'background-color': bgColor }"
+                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
-                    <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+                    <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons main']">{{mainIcon}}</i>
+                    <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons close']">add</i>
                 </div>
             </template>
             <template v-else>
                 <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
-                     class="fab pointer" :style="{ 'background-color': bgColor }"
+                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
-                    <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+                    <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons main']">{{mainIcon}}</i>
+                    <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons close']">add</i>
                 </div>
             </template>
         </template>
         <template v-else>
             <template v-if="mainTooltip">
                 <div v-bind:v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip'}"
-                     class="fab pointer" :style="{ 'background-color': bgColor }"
+                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
                     <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
                 </div>
             </template>
             <template v-else>
-                <div class="fab pointer" :style="{ 'background-color': bgColor }"
+                <div class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
                     <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
@@ -91,6 +91,9 @@
             position: {
                 default: 'bottom-right',
             },
+            positionType: {
+                default: 'fixed',
+            },
             zIndex: {
                 default: '999',
             },
@@ -103,12 +106,60 @@
             mainIcon: {
                 default: 'add'
             },
+            iconSize: {
+                default: 'medium'
+            },
             mainTooltip: {
                 default: null
             },
             actions: {}
         },
         computed: {
+            actionIconSize() {
+                switch (this.iconSize) {
+                    case 'small':
+                        return 'md-18';
+                        break;
+                    case 'medium':
+                        return 'md-24';
+                        break;
+                    case 'large':
+                        return 'md-36';
+                        break;
+                    default:
+                        return 'md-24';
+                }
+            },
+            mainIconSize() {
+                switch (this.iconSize) {
+                    case 'small':
+                        return 'md-24';
+                        break;
+                    case 'medium':
+                        return 'md-36';
+                        break;
+                    case 'large':
+                        return 'md-48';
+                        break;
+                    default:
+                        return 'md-36';
+                }
+            },
+            paddingAmount() {
+                switch (this.iconSize) {
+                    case 'small':
+                        return '1.8rem';
+                        break;
+                    case 'medium':
+                        return '2rem';
+                        break;
+                    case 'large':
+                        return '2.5rem';
+                        break;
+                    default:
+                        return '1.9rem';
+                }
+            },
             listPos() {
                 if (this.position === 'top-right' || this.position === 'top-left') {
                     return {
@@ -255,22 +306,20 @@
     }
 
     .fab-wrapper {
-        position: fixed;
         z-index: 999;
     }
 
     .fab {
         border-radius: 100px;
-        width: 65px;
+        /*width: 65px;*/
+        /*height: 65px;*/
+        padding: 2rem;
         position: relative;
         overflow: hidden;
-        height: 65px;
         display: flex;
         align-items: center;
         box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
         z-index: 2;
-        display: flex;
-        align-items: center;
         justify-content: center;
     }
 
@@ -313,12 +362,16 @@
     .fab-list {
         position: relative;
         z-index: 1;
-        margin: 2vh 0.5vw;
+        margin: 2vh 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     .fab-list li {
-        width: 50px;
-        height: 50px;
+        /*width: 50px;*/
+        /*height: 50px;*/
+        padding: .8rem;
         margin-top: 2vh;
         display: flex;
         align-items: center;
@@ -383,25 +436,27 @@
 
     @media screen and (max-width: 768px) {
         .fab-list {
-            margin: 2vh 1.8vw;
+            margin: 2vh 0;
         }
 
         .fab-list li {
-            width: 40px;
-            height: 40px;
+            /*width: 40px;*/
+            /*height: 40px;*/
+            /*padding: .6rem;*/
         }
 
         .fab-list li i {
-            font-size: 24px !important;
+            /*font-size: 24px !important;*/
         }
 
         .fab {
-            width: 55px;
-            height: 55px;
+            /*width: 55px;*/
+            /*height: 55px;*/
+            /*padding: 1.5rem;*/
         }
 
         .fab i {
-            font-size: 34px !important;
+            /*font-size: 34px !important;*/
         }
 
     }