Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/icon-blender/icon-blender

Create customized SVG icon collections from over 80,000 free and open-source icons
https://github.com/icon-blender/icon-blender

bootstrap csvg-icons fontawesome icons scss svg

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README 

        

# Icon Blender



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



![Test Results](https://github.com/icon-blender/icon-blender/actions/workflows/tests.yaml/badge.svg)



## 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](https://developers.google.com/speed/pagespeed/insights/)

- **Seamless integration with SCSS/Less.js workflow** 
No additional software to install or configure



## Usage



### SCSS

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)

@include icon($icons-fa,'search'); // include the 'search' icon from the FontAwesome4 collection

```



example.html

```html



```



### Less.js

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



```



### 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](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

```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](https://github.com/iconify/collections-json)



Package NamePrefixIcons

Akar Iconsakar-icons242

Ant Design Iconsant-design1828

Bootstrap Iconsbi1333

BPMNbpmn112

Brandico Fontbrandico45

BoxIconsbx1500

Bytesize Iconsbytesize102

Carboncarbon1584

CoreUI Brandscib831

CoreUI Flagscif199

CoreUI Freecil562

Clarityclarity1085

Codiconscodicon349

Cryptocurrency Iconscryptocurrency452

Dashiconsdashicons347

Evil Iconsei70

Elusive Iconsel304

Emoji One (Colored)emojione2159

Emoji One (Monotone)emojione-monotone1713

Emoji One (v1)emojione-v11529

Entypo+entypo321

Entypo+ Socialentypo-social76

Elegantet100

Eva Iconseva490

Font Awesome 4fa786

Font Awesome 5 Brandsfa-brands461

Font Awesome 5 Regularfa-regular151

Font Awesome 5 Solidfa-solid1024

Feather Iconfe255

Feather Iconsfeather286

File Iconsfile-icons918

Flat Color Iconsflat-color-icons329

Flat UI Iconsflat-ui100

Fluent UI System Iconsfluent6994

Fontelicofontelico34

Foundationfoundation283

Firefox OS Emojifxemoji1034

GeoGlyphsgeo30

css.gggg704

Gridiconsgridicons201

Grommet Iconsgrommet-icons611

HeroIcons Outlineheroicons-outline226

HeroIcons Solidheroicons-solid226

Google Material Iconsic10009

IcoMoon Freeicomoon-free491

Icons8 Windows 10 Iconsicons8234

Icaliconsil84

IonIconsion2582

Innowatio Fontiwwa105

Jam Iconsjam940

Line Awesomela2353

Material Line Iconsline-md250

SVG Logoslogos1397

Ligature Symbolsls348

Majesticonsmajesticons420

Makimaki388

Map Iconsmap167

Material Design Iconsmdi10639

Material Design Lightmdi-light267

Medical Iconsmedical-icon144

Mono Iconsmi147

Noto Emojinoto3678

Noto Emoji (v1)noto-v12320

Octiconsocticon604

Open Iconicoi223

OpenMojiopenmoji3954

Phosphorph4668

Pixelarticonspixelarticons460

PrestaShop Iconsps479

Radix Iconsradix-icons310

Raphaelraphael266

Remix Iconri2271

SmartIcons Glyphsi-glyph800

Simple Iconssimple-icons1914

Simple line iconssimple-line-icons189

Subway Icon Setsubway308

System UIconssystem-uicons422

Tabler Iconstabler1276

Teenyiconsteenyicons1200

TopCoat Iconstopcoat89

Twitter Emojitwemoji3823

Typiconstypcn336

Uniconsuil1236

Unicons Monochromeuim296

Vaadin Iconsvaadin636

Vesper Iconsvs172

VSCode Iconsvscode-icons1070

Web Symbols Ligawebsymbol85

WebHostingHub Glyphswhh2125

Weather Iconswi599

Icons8 Windows 8 Iconswpf294

Material Design Iconic Fontzmdi886

Zondiconszondicons297



## 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

```