Webicon
Webicon allows to insert any icons into your HTML. It’s like inserting icons with an icon font, but newer, better, faster, and it’ll make your hair smell nice.
| PNG | Fonts | One SVG file per icon |
SVG sets |
|
|---|---|---|---|---|
| Color icon support |  |
|
|
|
| Opacity | |
|
|
|
| Gradients | |
|
|
|
| Animations | |
|
||
| Responsive icons | |
|
||
| Multiple sizes | |
|
||
| Pixel perfect | |
|
|
|
| Extra files | CSS | |||
| Recolor | |
|
|
|
| Browser support | All | All | IE 8+ | IE 9+ |
| Number of files | Dozens and hundreds | 5 (TTF, EOT, WOFF, WOFF2, CSS) | Dozens and hundreds | 1 |
CSS Tricks published a great explanation of the advantages of SVG sets. See, we’re not the only ones nuts for SVG!
That’s where Webicon comes in — it’s an open source library that allows embedding icons from any icon library. Sounds hard? It’s not:
Quick and lightweight
- Fast embedding in less than a minute
- Only the icons you need are loaded
- No uploading, re-generating, or any other overhead
- Prevents your left socks from disappearing in your washing machine
Works with any icon and JS library
- Any icon library, such as FontAwesome, Material Icons by Google, Bootstrap, and Icons8. All major libraries are hosted on a free CDN
- Supports the syntax of AngularJS and jQuery
Examples
We’d take a bullet for SVG, but let’s not get ahead of ourselves. We’ve whipped up some examples:
Demo for different sources and formats
Search icons of 30 popular icon packs