If you are running a website, you are probably familiar with FontAwesome, maybe with GlyphIcons and few other glyph font libraries. They are awesome and are easy to use. To include font all you have to do is add one line of code like this Code: <link rel="stylesheet" href="link-to-css-file.css" /> then to use icon you need to write something simple like this: Code: <i class="icon icon-name"></i> It is very easy, which made glyph fonts very popular. However there are few downsides: Clients need to load entire fonts. You cannot just select which icons to load, entire font has to be loaded. Not much choice of icons. When selecting any font, you are pretty much limited to icons in that font because of loading speed. Loading more than 2 fonts will slow down your page a lot, so almost nobody uses more than 1 font. Because of that selection of icons is limited to few fonts. Rendering issues. Fonts are rendered differently on different operating systems and even in different browsers on same operating system. Using font to display icons means icons will not be shown the same way for all clients. In preparation for XenForo 2 I wanted to find a solution for those issues. Those are all vector icons, so displaying them as SVG shouldn't be hard, right? Wrong. There are bunch of issues with using SVG icons: Using SVG icons as external images, like PNG/JPG/GIF, has some downsides: Images cannot inherit document color. That means each shape in SVG image must have hardcoded color. That means if image supposed to change color when clicked, entire image has to be replaced with different image. SVG sprites aren't supported by some browsers, making them completely useless for anything other than experimenting. They are also not trivial to build. That means each SVG image has to be stored separately. That makes external SVG images very hard to use. Preload SVG into DOM? Every image will be loaded on each page load, often multiple times per page (not all browsers support sprites). SVG images aren't easy to prepare. Glyph fonts are - just plug it in, write few lines of code and that's all. So I wrote a library that solves all those issues. First it was a project designed for my own styles, but later it grew into a bigger separate project that I decided to release as open source. What is SimpleSVG? It is SVG framework that works similar to glyph fonts, but without glyph fonts downsides. It is as easy to use as glyph fonts. Add one line of code to page, preferably before </body>: Code: <script src="//code.iconify.design/1/1.0.0-rc1/iconify.min.js"></script> then to add any icon, write something like this: Code: <span class="iconify" data-icon="fa-home"></span> For list of available icons see search form in "Samples" section below. What makes SimpleSVG different from glyph fonts: Icons are loaded on demand. Glyph fonts load entire fonts, SimpleSVG loads only icons that are used on page. Over 30,000 premade icons to choose from, including FontAwesome, MDI, Entypo+ and many other collections. Emojis! Default collection includes several emoji sets: Emoji One, Firefox Emoji, Noto Emoji, Twitter Emoji. Using SimpleSVG you can use any or all of those emoji sets on same page. Icons will be displayed exactly the same for all visitors, regardless of their browser and operating system. Icons are rendered exactly the same in all browsers. No more blurring because of font rendering settings. What makes SimpleSVG different from inserting SVG into document: Monotone icons inherit color from stylesheet. It works just like glyph fonts: to change color you need to set color in stylesheet using something like "color: red". Icons are automatically scaled down to current font size and aligned to baseline, just like glyph fonts. To change icon height you need to set different font-size. You don't need to worry about dimensions of original SVG icon, SimpleSVG will take care of everything for you. There is also option to set custom dimensions using width and height attributes. More details on that will be posted later. Icons are loaded in bulk from CDN as JSON data, which contains only shapes, width and height. One HTTP(S) request can load several icons at the same time without SVG overhead, so it loads fast and uses less bandwidth. 100 icons takes only 15-20kb (sometimes more, sometimes less - depends on complexity of shapes of those icons). No need to host SVG icons set. Icons are loaded dynamically from CDN. You have option to host icons yourself too (see documentation). Other stuff: Migrating from glyph font? There are several plugins available that lets you use SimpleSVG without changing code. Currently plugins are available for FontAwesome, Icalicons and PrestaShop icons. Want to use SVG as backgrounds? It is possible. CDN can generate SVG images that you can use as background in stylesheet. Downside is you need to specify color in URL because backgrounds cannot inherit color from DOM element. Want to create your own icons set? It is possible. Tools for creating custom sets will be published within next few weeks. Tools for hosting custom CDN are already available on GitHub. Or instead of hosting, you can append icons to page as script. More details on that will be added later. Can SimpleSVG be used with premium icon sets? Yes. All you need to do is host your own CDN for your icons and add one line of code to make SimpleSVG load icons with your custom prefix from your server. Icon prefix is first few letters in name of icon before first "-", such as "fa" in "fa-home". What if you change document after page load? SimpleSVG observes DOM for changes, replacing all new span tags with SVG images. AJAX forms and anything else that adds content to page will work fine. Browser support. SimpleSVG works with all modern browsers. From old browsers it supports old WebKit (Safari, Chrome used on outdated phones), Internet Explorer 9 and newer versions. Script does not have any dependencies. Support for old Internet Explorer requires several polyfills (WeakMaps, Observer), but SimpleSVG will load them automatically. Sample Want to see it in action? Visit icons page on SimpleSVG website: https://iconify.design/icon-sets/ There are so many icons to choose from, just searching for "chat" returns many icons that forum owners can use instead of forum icons: In emoji search you can filter emojis by categories and search by keywords: Click any icon on full search sample to get HTML code for it. Browse collections to see how many icons are available with SimpleSVG. You can't get that many choices with any glyph font, bandwidth requirements would be massive, but with SimpleSVG load on demand number of icons website owners can use is unlimited. Plugins to make migration easier Some icon sets used in SimpleSVG are imported from glyph fonts. SimpleSVG includes plugins for some of those collections that make it easier to migrate from font library. By default SimpleSVG is searching for items with "iconify" class and uses data-icon attribute to get icon name: Code: <span class="iconify" data-icon="mdi-home"></span> Plugins make SimpleSVG search for other selectors, so you can keep using old library syntax: Code: <i class="fa fa-arrow-left"></i> How to use plugins? Add "plugins" parameter to SimpleSVG script tag with list of plugins separated by comma: Code: <script src="//code.iconify.design/1/1.0.0-rc1/plugin-fa.min.js"></script> Code, license Main website is available here: https://iconify.design/ All code is available on GitHub: https://github.com/iconify-design SimpleSVG and all support libraries are released with MIT license. That means you can use it in free and commercial projects. Icons collections are released under different licenses set by their creators. You can see licenses in search test page in list of collections. All collections included in SimpleSVG are released with some kind of free license. Other Over next few months I'll be releasing tools, posting tutorials and documentation for SimpleSVG and make a proper website for it. Until website is ready, announcements will be posted on this forum. SimpleSVG is separate project from Artodia, all developers are welcome to use it in their projects, free and premium. I will be using it in my XenForo 2 styles.