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

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