Icon-blender NPM

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);
}