Icon Blender

Create customized SVG icon collections from over 80,000 free and open-source icons

Features

• Include only the icons you need Custom icon bundles means smaller transfer sizes and faster page loading
• Use icons from multiple packages Adding icons from another icon package doesn't require including entire packages
• SVG in CSS Icons vectors are embedded directly in your CSS files eliminating the need for additional font files
• No font files Eliminating font files means one less server request before your pages load and solves the "Ensure text remains visible during webfont load" issue on PageSpeed Insights
• Seamless integration with SCSS/Less.js workflow No additional software to install or configure

Usage

SCSS

example.scss

@import "icon-blender/scss/icon-blender.scss"; // import default variables, mixins and core styles
@import "icon-blender/scss/icons/fa.scss"; // import the FontAwesome4 collection ($icons-fa)
@include icon($icons-fa,'search'); // include the 'search' icon from the FontAwesome4 collection

example.html

<i class="ib fa-search"></i>

Less.js

example.less

@import "icon-blender/less/icon-blender.less"; // import default variables, mixins and core styles
@import "icon-blender/less/icons/fa.less"; // import the FontAwesome4 collection ($icons-fa)
.ib.icon(@icons-fa, search); // include the 'search' icon from the FontAwesome4 collection

example.html

<i class="ib fa-search"></i>

CSS

Not using SCSS? You can still use IconBlender by selecting icons and generating CSS on icon-blender.com

Styling

IconBlender comes with standard scale (ib-2x..), rotate (ib-rotate-90..., flip (ib-flip-vertical...), and animation (ip-spin) classes. See examples at https://icon-blender.com/docs

Custom Class Names

When using the icon() mixin, generated class names will take the form .#{$collection-prefix}-#{$icon-name}. If you'd prefer alternate class names, you can use the iconUrl() mixin instead.

example.scss

@import "icon-blender/scss/icon-blender.scss"; // import default variables, mixins and core styles
@import "icon-blender/scss/icons/fa.scss"; // import the FontAwesome4 collection ($icons-fa)

.my-class-name{
	@include iconUrl($icons-fa,'search');
}

example.less

@import "icon-blender/less/icon-blender.less"; // import default variables, mixins and core styles
@import "icon-blender/less/icons/fa.less"; // import the FontAwesome4 collection ($icons-fa)

.my-class-name{
	.ib.iconUrl(@icons-fa,search);
}

Available Icon Packages

Icon definitions from Iconfy

Contributing

Install the dependencies that are required to build and test:

$ npm install

Run tests

$ npm test

Create scss/icon/.scss and less/icon/.less files from json

$ npm run build

Build css/icon-blender.css

$ npm run build:css