diff --git a/package.json b/package.json
index b6f7a52..adbc308 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
diff --git a/scss/components/_icon.scss b/scss/components/_icon.scss
deleted file mode 100644
index eb10fd6..0000000
--- a/scss/components/_icon.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * icon
- *
- * use svg as icon
- *
- * <svg class="icon">
- *     <use src="#"></use>
- * </svg>
- *
- *
- * @author Björn Hase
- *
- */
-
-
-$icon__vertical-align: middle !default;
-$icon__margin: 0 2px !default;
-
-@mixin crispy-boilerplate-icon() {
-    .icon {
-        display: inline-block;
-        position: relative;
-        vertical-align: $icon__vertical-align;
-        margin: $icon__margin;
-
-        @content;
-    }
-}
diff --git a/scss/_mixins.scss b/src/_mixins.scss
similarity index 61%
rename from scss/_mixins.scss
rename to src/_mixins.scss
index 30ecab2..48cf659 100644
--- a/scss/_mixins.scss
+++ b/src/_mixins.scss
@@ -11,6 +11,25 @@
     font-size: pxToRem($font-size);
 }
 
+/**
+ * add modificators for font-size from a map
+ *
+ *
+ * @param {map} $font-sizes
+ *
+ */
+@mixin font-sizes($font-sizes) {
+    @each $name, $font-size in $font-sizes {
+       @if ($name == 'default') {
+           @include font-size($font-size);
+       } @else {
+           &--#{$name} {
+               @include font-size($font-size);
+           }
+       }
+   }
+}
+
 /**
  * clearfix to end floating
  *
diff --git a/scss/components/_align.scss b/src/components/_align.scss
similarity index 100%
rename from scss/components/_align.scss
rename to src/components/_align.scss
diff --git a/scss/components/_animation.scss b/src/components/_animation.scss
similarity index 100%
rename from scss/components/_animation.scss
rename to src/components/_animation.scss
diff --git a/scss/components/_body.scss b/src/components/_body.scss
similarity index 100%
rename from scss/components/_body.scss
rename to src/components/_body.scss
diff --git a/scss/components/_button.scss b/src/components/_button.scss
similarity index 100%
rename from scss/components/_button.scss
rename to src/components/_button.scss
diff --git a/scss/components/_heading.scss b/src/components/_heading.scss
similarity index 100%
rename from scss/components/_heading.scss
rename to src/components/_heading.scss
diff --git a/src/components/_icon.scss b/src/components/_icon.scss
new file mode 100644
index 0000000..428ab7c
--- /dev/null
+++ b/src/components/_icon.scss
@@ -0,0 +1,102 @@
+/**
+ * icon
+ *
+ * use svg as icon
+ *
+ * <svg class="icon">
+ *     <use src="#"></use>
+ * </svg>
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+
+$icon__vertical-align: middle !default;
+$icon__margin: 0 2px !default;
+
+// width & height
+$icon__sizes: (
+    'default': 18px,
+    'small': 14px,
+    'large': 28px
+) !default;
+
+// colors
+$icon__colors: (
+    'default' : black,
+    'secondary' : grey,
+) !default;
+
+@mixin crispy-boilerplate-icon() {
+    .icon {
+        display: inline-block;
+        position: relative;
+        vertical-align: $icon__vertical-align;
+        margin: $icon__margin;
+
+        @content;
+    }
+}
+
+/**
+ * add modificators for icons as fill from map
+ *
+ *
+ * @param {map} $colors
+ *
+ */
+@mixin crispy-boilerplate-icon-colors($colors) {
+     @each $name, $color in $colors {
+        @if ($name == 'default') {
+             @include crispy-boilerplate-icon-color($color);
+        } @else {
+            &--#{$name} {
+                @include crispy-boilerplate-icon-color($color);
+            }
+        }
+    }
+}
+
+/**
+ * add color as fill
+ *
+ *
+ * @param {color} $color
+ *
+ */
+@mixin crispy-boilerplate-icon-color($color) {
+    fill: $color;
+}
+
+/**
+ * adding sizes for icons from map
+ *
+ *
+ * @param {map} $sizes
+ *
+ */
+@mixin crispy-boilerplate-icon-sizes($sizes) {
+     @each $name, $size in $sizes {
+        @if ($name == 'default') {
+             @include crispy-boilerplate-icon-size($size);
+        } @else {
+            &--#{$name} {
+                @include crispy-boilerplate-icon-size($size);
+            }
+        }
+    }
+}
+
+/**
+ * add size for icon as width and height
+ *
+ *
+ * @param {px} $size
+ *
+ */
+@mixin crispy-boilerplate-icon-size($size) {
+    width: $size;
+    height: $size;
+}
diff --git a/scss/components/_list.scss b/src/components/_list.scss
similarity index 100%
rename from scss/components/_list.scss
rename to src/components/_list.scss
diff --git a/scss/components/_margin.scss b/src/components/_margin.scss
similarity index 100%
rename from scss/components/_margin.scss
rename to src/components/_margin.scss
diff --git a/scss/components/_normalize.scss b/src/components/_normalize.scss
similarity index 100%
rename from scss/components/_normalize.scss
rename to src/components/_normalize.scss
diff --git a/scss/components/_text-colors.scss b/src/components/_text-colors.scss
similarity index 100%
rename from scss/components/_text-colors.scss
rename to src/components/_text-colors.scss
diff --git a/scss/crispyBoilerplate.scss b/src/crispyBoilerplate.scss
similarity index 100%
rename from scss/crispyBoilerplate.scss
rename to src/crispyBoilerplate.scss
diff --git a/scss/example.scss b/src/example.scss
similarity index 100%
rename from scss/example.scss
rename to src/example.scss
diff --git a/scss/functions/_units.scss b/src/functions/_units.scss
similarity index 100%
rename from scss/functions/_units.scss
rename to src/functions/_units.scss
diff --git a/scss/functions/_zIndex.scss b/src/functions/_zIndex.scss
similarity index 100%
rename from scss/functions/_zIndex.scss
rename to src/functions/_zIndex.scss