Your custom icon set is empty
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:
- Faster page loading by reducing server requests
- Faster page loading by reducing asset bundle sizes
- Easier access to 80,000+ free and open-source icons
Reducing Server Requests
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script defer src="/your-path-to-fontawesome/js/fontawesome.js">
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).
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?
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
|Number of Icons Used||Icon Blender Size||Savings|
|5||1.4 KB||12.6 KB to 22.6 KB|
|10||2.5 KB||11.5 KB to 21.5 KB|
|20||4.5 KB||9.5 KB to 29.5 KB|
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.