Selected Icons Download

Nothing Selected

Your custom icon set is empty

CSS

SCSS

PostCSS

Less

Documentation

IconBlender allows you to make custom SVG icon collections from over 80,000 icons from 93 free and open-source packages. Using a custom icon set will help your web pages load faster and increases your design flexibility.

Quick Start

The fastest way to get started is with our web interface. Follow these three steps to add your first custom icon set to your projects.

Search for and select icons
Copy the generated CSS into your project
Add html: <i class="ib mdi-github"><i>

Integrations

SCSS, Less.js integrations are available from our core package on GitHub and NPM.

PostCSS Icon Blender is a separate package, also on GitHub and NPM.

Integration details are available on each repo.

Styling

The following examples mirror what's found on other icon sites and are included here to demonstrate the compatibility of IconBlender icon sets.

Basic Icon

mdi-svg

<i class="ib mdi-svg"></i>

You can place icons just about anywhere with <i> tags like the above. Don't like the class names, change them in your CSS to anything you like.

Icon Sizes

ib-2x

ib-3x

ib-4x

ib-5x

Use these scaling classes to change the size of icons.

<i class="ib mdi-svg ib-2x"></i>
<i class="ib mdi-svg ib-3x"></i>
<i class="ib mdi-svg ib-4x"></i>
<i class="ib mdi-svg ib-5x"></i>

Animated Icons

ib-spin

ib-pulse

Use the fa-spin class to get any icon to rotate

<i class="ib la-spinner ib-spin ib-3x"></i>
<i class="ib la-spinner ib-pulse ib-3x"></i>

Rotated & Flipped

fe-shield

ib-rotate-90

ib-rotate-180

ib-rotate-270

ib-flip-horizontal

ib-flip-vertical

Use the fa-spin class to get any icon to rotate

<i class="ib fe-shield"></i>
<i class="ib fe-shield ib-rotate-90"></i>
<i class="ib fe-shield ib-rotate-180"></i>
<i class="ib fe-shield ib-rotate-270"></i>
<i class="ib fe-shield ib-flip-horizontal"></i>
<i class="ib fe-shield ib-flip-vertical"></i>

Icon Colors (Background Masking)

icomoon-free-spinner4

conic-gradient

animated-gradient

Icons are displayed using the mask-image CSS property and as a result, the SVG is actually used as a mask for the background of the ::before DOM element.

<i class="ib icomoon-free-spinner4"></i>
<i class="ib icomoon-free-spinner4 conic-gradient"></i>
<i class="ib icomoon-free-spinner4 animated-gradient"></i>

.conic-gradient::before{
    background: conic-gradient(#43AAD9 72deg, #2BA68A 72deg 144deg, #f48520 144deg 216deg, #da596a 216deg 288deg, #3382A6 288deg 360deg);
};

.animated-gradient::before{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 7s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

Two-Tone and Colorful Icons

Two-Tone Palettes

default foreground text and white background

blue foreground text and white background

red foreground text and white background

Most SVG icons are designed with just two colors in mind: the foreground and background colors. As seen here, the ion-fish-sharp icon inherits foreground and background color properties from the paragraph.

<p><i class="ib ion-fish-sharp"></i> default foreground text and white background</p>
<p class="text-blue"><i class="ib ion-fish-sharp"></i> blue foreground text with white background </p>
<p class="text-red"><i class="ib ion-fish-sharp"></i> red foreground text and white background</p>

Colorful Palettes

SVG colors on white background

SVG images can have any number of colors and some icons designers have opted for a more colorful palette. For example, the twemoji-tropical-fish icon defines different colors for the fish's stripes, eye and the body.

To make the colors defined in the SVG display correctly, we need to use the .ibc class instead of .ib.

<p><i class="ibc twemoji-tropical-fish"></i> SVG colors on white background</p>

Breakdown

The following tables demonstrate the different uses of .ib and .ibc with the ion-fish-sharp and twemoji-tropical-fish icons.

color:red	color:blue
.ib Colors inherited from parent node
`<i class="ib text-red ...">`	`<i class="ib text-blue ...">`
`<i class="ib text-red ...">`	`<i class="ib text-blue ...">`

color:red	color:blue
.ibc Displays colors defined in the SVG
`<i class="ibc text-red ...">`	`<i class="ibc text-blue ...">`
`<i class="ibc text-red ...">`	`<i class="ibc text-blue ...">`