icon-blender
Advanced tools
Create customized SVG icon collections from over 80,000 free and open-source icons
Create customized SVG icon collections from over 80,000 free and open-source icons
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>
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>
Not using SCSS? You can still use IconBlender by selecting icons and generating CSS on icon-blender.com
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
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);
}
Icon definitions from Iconfy
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
FAQs
Create customized SVG icon collections from over 80,000 free and open-source icons
We found that icon-blender demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.