icon-blender

1.0.0-beta.4 • Public • Published

Icon Blender

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

Test Results

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

Package Name Prefix Icons
Akar Icons akar-icons 242
Ant Design Icons ant-design 1828
Bootstrap Icons bi 1333
BPMN bpmn 112
Brandico Font brandico 45
BoxIcons bx 1500
Bytesize Icons bytesize 102
Carbon carbon 1584
CoreUI Brands cib 831
CoreUI Flags cif 199
CoreUI Free cil 562
Clarity clarity 1085
Codicons codicon 349
Cryptocurrency Icons cryptocurrency 452
Dashicons dashicons 347
Evil Icons ei 70
Elusive Icons el 304
Emoji One (Colored) emojione 2159
Emoji One (Monotone) emojione-monotone 1713
Emoji One (v1) emojione-v1 1529
Entypo+ entypo 321
Entypo+ Social entypo-social 76
Elegant et 100
Eva Icons eva 490
Font Awesome 4 fa 786
Font Awesome 5 Brands fa-brands 461
Font Awesome 5 Regular fa-regular 151
Font Awesome 5 Solid fa-solid 1024
Feather Icon fe 255
Feather Icons feather 286
File Icons file-icons 918
Flat Color Icons flat-color-icons 329
Flat UI Icons flat-ui 100
Fluent UI System Icons fluent 6994
Fontelico fontelico 34
Foundation foundation 283
Firefox OS Emoji fxemoji 1034
GeoGlyphs geo 30
css.gg gg 704
Gridicons gridicons 201
Grommet Icons grommet-icons 611
HeroIcons Outline heroicons-outline 226
HeroIcons Solid heroicons-solid 226
Google Material Icons ic 10009
IcoMoon Free icomoon-free 491
Icons8 Windows 10 Icons icons8 234
Icalicons il 84
IonIcons ion 2582
Innowatio Font iwwa 105
Jam Icons jam 940
Line Awesome la 2353
Material Line Icons line-md 250
SVG Logos logos 1397
Ligature Symbols ls 348
Majesticons majesticons 420
Maki maki 388
Map Icons map 167
Material Design Icons mdi 10639
Material Design Light mdi-light 267
Medical Icons medical-icon 144
Mono Icons mi 147
Noto Emoji noto 3678
Noto Emoji (v1) noto-v1 2320
Octicons octicon 604
Open Iconic oi 223
OpenMoji openmoji 3954
Phosphor ph 4668
Pixelarticons pixelarticons 460
PrestaShop Icons ps 479
Radix Icons radix-icons 310
Raphael raphael 266
Remix Icon ri 2271
SmartIcons Glyph si-glyph 800
Simple Icons simple-icons 1914
Simple line icons simple-line-icons 189
Subway Icon Set subway 308
System UIcons system-uicons 422
Tabler Icons tabler 1276
Teenyicons teenyicons 1200
TopCoat Icons topcoat 89
Twitter Emoji twemoji 3823
Typicons typcn 336
Unicons uil 1236
Unicons Monochrome uim 296
Vaadin Icons vaadin 636
Vesper Icons vs 172
VSCode Icons vscode-icons 1070
Web Symbols Liga websymbol 85
WebHostingHub Glyphs whh 2125
Weather Icons wi 599
Icons8 Windows 8 Icons wpf 294
Material Design Iconic Font zmdi 886
Zondicons zondicons 297

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

Package Sidebar

Install

npm i icon-blender

Weekly Downloads

35

Version

1.0.0-beta.4

License

TBD

Unpacked Size

290 MB

Total Files

214

Last publish

Collaborators

  • oyejorge