Why Icon Blender?

Icon Blender proposes an alternative method for displaying SVG graphics in web pages. Our approach has a number of benefits when compared to commonly used practices including:

1. Faster page loading by reducing server requests
2. Faster page loading by reducing asset bundle sizes
3. Easier access to 80,000+ free and open-source icons

Reducing Server Requests

Including popular icon libraries in a web page often involves including an additional CSS or JavaScript file in your page.

CSS <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

JS <script defer src="/your-path-to-fontawesome/js/fontawesome.js">

Behind the scenes, once the CSS or JavaScript file is loaded, it requests an additional asset from the server. This second resource is often a WebFont file or JavaScript file that contains the actual SVG/Glyph definitions.

Our Approach

With Icon Blender, SVG icons are defined in CSS alone. Using Data URLs, icon definitions can easily be included in CSS assets your web pages already use. This approach eliminates two server requests (one chained request).

For example, url('data:image/svg+xml,%3csvg viewBox="0 0 16 16"%3e%3cg fill="currentColor"%3e%3cpath d="M5 8h6v1H5z"/%3e%3c/g%3e%3c/svg%3e'); defines the "codicon-dash" icon.

PageSpeed Insight Results

Besides reducing the total number of server requests and reducing asset bundle sizes, our approach has the added benefit of eliminating the "Ensure text remains visible during webfont load" notice in Lighthouse performance analysis. You can check the performance of your website using Google PageSpeed Insights.

Smaller Asset Bundles

When you include an icon library in a webpage, you're often including the entire icon library. The FontAwesome 5 Regular icon set defines around 150 icons and can be included in a web page with 14 KB to 34 KB of CSS and WebFont data. The FontAwesome 5 Solid icon set contains around 1,000 icons and uses 78 kB to 203 kB of data. How many of those icons will you actually use though? Five? ... Ten? ... Twenty?

Our Approach

Icon Blender makes it easy to include only the icons you need, reducing the amount of data browsers need to load before displaying your web pages. If you already use SCSS, Less, or PostCSS for generating CSS our open-source repos integrate seamlessly with your dev process. You can also copy and paste the vanilla CSS from our web iterface.

FontAwesome 5 Regular Comparison

80,000+ Icons

Icon Blender allows you to make custom SVG icon collections from over 80,000 icons from 93 free and open-source packages. Your custom collections can contain a subset of one package or mix and match from multiple packages.