diff --git a/sass/ratchicons.scss b/sass/ratchicons.scss
index 0751b15..4e57171 100644
--- a/sass/ratchicons.scss
+++ b/sass/ratchicons.scss
@@ -6,11 +6,11 @@
   font-family: Ratchicons;
   font-weight: normal;
   font-style: normal;
-  src: url('#{$icon-font-path}ratchicons.eot');
-  src: url('#{$icon-font-path}ratchicons.eot?#iefix') format('embedded-opentype'),
-       url('#{$icon-font-path}ratchicons.woff') format('woff'),
-       url('#{$icon-font-path}ratchicons.ttf') format('truetype'),
-       url('#{$icon-font-path}ratchicons.svg#svgFontName') format('svg');
+  src: url('#{$icon-font-path}#{$icon-font-name}.eot');
+  src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
+       url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
+       url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
+       url('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}') format('svg');
 }
 
 .icon {
diff --git a/sass/variables.scss b/sass/variables.scss
index e781dc9..7c73ff6 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -16,8 +16,9 @@ $line-height-default: 21px !default;
 // --------------------------------------------------
 //## Specify custom location and filename of the included Ratchicons icon font. Useful for those including Ratchet via Bower.
 
-//** Load fonts from this directory.
 $icon-font-path: "../fonts/";
+$icon-font-name: "ratchicons";
+$icon-font-svg-id: "svgFontName";
 
 
 // Colors