diff --git a/src/scss/_user.scss b/src/scss/_user.scss
new file mode 100644
index 0000000..8c39fd5
--- /dev/null
+++ b/src/scss/_user.scss
@@ -0,0 +1,24 @@
+// User custom variables
+// =============================================================================
+
+// Custom font icon
+// -----------------------------------------------------------------------------
+//$icon-fonts: (
+//  // font-family
+//  YourFont: (
+//    weight: normal,
+//    style: normal,
+//    // font path
+//    src: unquote(
+//        'url("yourfont.woff") format("woff"),
+//        url("yourfont.ttf") format("truetype"),
+//        url("yourfont.svg#svgFontName") format("svg");'
+//    )
+//  ),
+//);
+//
+//// icon name-unicode map
+//$icons: (
+//  back: \e80a,
+//  bars: \e80e,
+//);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 9632882..aa36676 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -261,10 +261,24 @@ $group-header-color: #6d6d72 !default;
 $group-header-font-size: $font-size-sm !default;
 
 
-  // Icon Variables
+// Icon Variables
 // -----------------------------------------------------------------------------
-$icon-prefix: #{$namespace}icon;
-$icon-path: 'fonts/';
+// font list: (font-family, font-weight, font-style, src)
+$icon-prefix: #{$namespace}icon !default;
+$ratchicons-path: 'fonts/';
+$icon-fonts: (
+  Ratchicons: (
+    weight: normal,
+    style: normal,
+    src: unquote(
+        'url("#{$ratchicons-path}ratchicons.woff") format("woff"),
+        url("#{$ratchicons-path}ratchicons.ttf") format("truetype"),
+        url("#{$ratchicons-path}ratchicons.svg#svgFontName") format("svg");'
+    )
+  ),
+) !default;
+// $icon-font-family: Ratchicons, sans-serif !default;
+$icon-font-size: 24px !default;
 $icons: (
   back: \e80a,
   bars: \e80e,
diff --git a/src/scss/amazeui.touch.scss b/src/scss/amazeui.touch.scss
index 4aa39b4..2a1548c 100644
--- a/src/scss/amazeui.touch.scss
+++ b/src/scss/amazeui.touch.scss
@@ -7,6 +7,9 @@
 // Variables
 @import "variables";
 
+// User Custom variables
+@import "user";
+
 // Mixins
 @import "helper/mixins";
 
diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss
index 9a5de91..f5632de 100644
--- a/src/scss/components/_icon.scss
+++ b/src/scss/components/_icon.scss
@@ -6,19 +6,24 @@
 
 // Output
 // -----------------------------------------------------------------------------
-@font-face {
-  font-family: Ratchicons;
-  font-weight: normal;
-  font-style: normal;
-  src: url('#{$icon-path}ratchicons.woff') format('woff'),
-  url('#{$icon-path}ratchicons.ttf') format('truetype'),
-  url('#{$icon-path}ratchicons.svg#svgFontName') format('svg');
+@each $family, $map in $icon-fonts {
+  @font-face {
+    font-family: $family;
+    font-weight: map_get($map, weight);
+    font-style: map_get($map, style);
+    src: map_get($map, src);
+  }
 }
 
 %font-icon {
+  $font-family: '';
+  @each $family, $map in $icon-fonts {
+    $font-family: unquote('#{$font-family}#{$family}, ');
+  }
+
   display: inline-block;
-  font-family: Ratchicons, sans-serif;
-  font-size: 24px;
+  font-family: unquote('#{$font-family}sans-serif');
+  font-size: $icon-font-size;
   line-height: 1;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;