Create customized SVG icon collections from over 80,000 free and open-source icons
npm install icon-blenderCreate customized SVG icon collections from over 80,000 free and open-source icons
- 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
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
html
`$3
example.less
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
html
`$3
Not using SCSS? You can still use IconBlender by selecting icons and generating CSS on icon-blender.com$3
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
$3
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
`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
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:
sh
$ npm install
`Run tests
sh
$ npm test
`Create scss/icon/.scss and less/icon/.less files from json
sh
$ npm run build
`Build css/icon-blender.css
sh
$ npm run build:css
``