Generate (S)CSS file for icon font created with Gulp

npm install gulp-iconfont-css
16 downloads in the last day
215 downloads in the last week
354 downloads in the last month


Generate (S)CSS file for icon font created with Gulp


The latest version of gulp-iconfont emits a codepoints event (see which should likely be used instead of the workflow described below. However, it will continue to work as expected. The future of this plugin will be discussed in


First, install gulp-iconfont-css as a development dependency:

npm install --save-dev gulp-iconfont-css

Then, add it to your gulpfile.js:

var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');

var fontName = 'Icons';

gulp.task('iconfont', function(){
      fontName: fontName,
      path: 'app/assets/css/templates/_icons.scss',
      targetPath: '../../css/_icons.scss',
      fontPath: '../../fonts/icons/'
      fontName: fontName

gulp-iconfont-css works well with gulp-iconfont but you can use it in a more modular fashion by directly using gulp-svgicons2svgfont, gulp-svg2tff, gulp-ttf2eot and/or gulp-ttf2woff.




Type: String

The name of the generated font family (required). Important: Has to be identical to iconfont's fontName option.


Type: String

The template path (optional, defaults to css template provided with plugin).If set to 'scss' or 'less', the corresponding default template will be used. See templates


Type: String

The path where the (S)CSS file should be saved, relative to the path used in gulp.dest() (optional, defaults to _icons.css).


Type: String

Directory of font files relative to generated (S)CSS file (optional, defaults to ./).


Type: String

The template engine to use (optional, defaults to lodash). See for available engines. The engine has to be installed before using.

npm loves you