Skip to main content

Creating an Iconfont with Gulp

Aug 30 '16

Plugins Required

  • Gulp
  • Gulp-Sass

    We'll need this to compile our generated SCSS file into CSS we can use to display the icons.

  • Gulp-Imagemin

    This is for compressing before creating the actual font. That way we can get rid of all the extra fluff from exported SVGs. Plus, you can't always count on an asset being optimized before its sent to you.

  • Gulp-Iconfont

    The main plugin that will generate the font.

  • Gulp-Iconfontcss

    This is an add-on to `gulp-iconfont`. It allows you to create a template that will generate a custom `SCSS` file. In case you need that extra control.

    You might not need this if you're just going to use the generated partial, like we are in this case. But we'll be doing more advanced stuff in the future.

If you just want to generate a font this basic task will get you up & running:

Pay close attention to the paths, some are relative to the project directory and others like `targetPath` are relative to the generated font directory.

My setup is like this:

      css (will be generated)
      fonts (will be generated)
          svg (icons to be generated into font)

  var fontName = 'demo-icons';
  gulp.task('iconfont', function() {
        fontName: fontName,
        targetPath: '../scss/global/_icons.scss',
        fontPath: '../fonts/'
        fontName: fontName,
        // Remove woff2 if you get an ext error on compile
        formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
        normalize: true,
        fontHeight: 1001
  gulp.task('icons', ['iconfont', 'scss']);

The plugin itself has several options. I like to normalize and set a height to try to get the most consistent icon rendering. I've noticed issues with some imported SVGs that show up so small you can barely see them. That's where `fontHeight` and `normalize` come in.

You'll need to create a task to compile the SCSS as well. Otherwise you'll refresh until your mouse breaks and you won't see the updated font. The task is a simple one:

  gulp.task('scss', function(){
      .pipe(autoprefixer()) // Requires the gulp-autoprefixer plugin
      .pipe(notify({ message: 'SCSS task complete' })) // Requires gulp-notify

Then you just need to create the task to create the font and regenerate the styles.

  gulp.task('icons', ['iconfont', 'scss']);

And you can call it using `gulp icons`. That's it.

Related Links

Seriously Don't Use Icon Fonts
Seriously, Use Icon Fonts

These are two very good articles explaining why you should and shouldn't use icon fonts. They both make very good points and I wouldn't consider either one wrong. It's all down to what your project needs.

Read more about: