Create custom icon sets from over 80,000 open-source icons
100% SVG & CSS, No Javascript, No WebFonts
Selected Icons Download

Nothing Selected

Your custom icon set is empty

CSS
/* The .ib and .ibc classes included below contain the minimum
 * necessary CSS properties for icon display. Additional size,
 * transform, and animation styles are available in icon-blender.css
 * from https://github.com/icon-blender/icon-blender
 */

.ib::before,
.ibc::before{
	display: inline-block;
	height: 1em;
	width: 1em;
	vertical-align: -.125em;
	content:'';
}

.ib::before{
	background: currentColor;
	mask-image: var(--url);
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var(--url);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.ibc::before{
	background-image: var(--url);
	background-size: contain;
	background-position: 50% 50%;
	background-repeat:no-repeat;
}

/* No icons selected */
SCSS
/* SCSS requires mixins and core styles from the icon-builder repo
 * https://github.com/icon-blender/icon-blender
 * https://www.npmjs.com/package/icon-blender
 */

@import "icon-blender/scss/icon-blender.scss";

/* No icons selected */
PostCSS
/* PostCSS requires the PostCSS Icon Blender Plugin
 * https://github.com/icon-blender/postcss-icon-blender
 * https://www.npmjs.com/package/postcss-icon-blender
 */

@import "icon-blender/css/icon-blender.css";

/* No icons selected */
Less
/* Less requires mixins and core styles from the icon-builder repo
 * https://github.com/icon-blender/icon-blender
 * https://www.npmjs.com/package/icon-blender
 */

@import "icon-blender/less/icon-blender.less";

/* No icons selected */