About Iconify

History

Iconify was originally created in 2016 to be part of forum styles for XenForo 2 available on Artodia.com

However at early stages of development it was changed to separate open source project, not linked to XenForo styles. Originally it was named SimpleSVG.

After about 2 years of development right before release project was renamed to Iconify.design

Why was Iconify created?

It was created to solve several problems that plagued websites for years:

Lack of variety

Over the years few glyph fonts became de facto standards. Most popular font by far is FontAwesome.

Why did it happen? When designing plug-in for any software, plug-in designer must make sure plug-in is compatible with theme. When designing any theme, theme designer must make sure it works with many plug-ins. That means both theme and plug-in authors must use same set of icons. That led to all themes and plug-ins using same icons. Want login icon? Use fa-sign-in. Need a home icon? Use fa-home.

Why can't designers use several fonts in project? Because each font loads entire set of icons regardless of how many icons are used on page. Using two fonts increases resource usage by a lot. Using 3 is insane.

There are many great icon sets out there. But because of monopoly they had 0 chance to be used. That led to many great projects dying, only further reinforcing use of de facto standard fonts.

Same applies to all SVG frameworks. They are no different than fonts.

Rendering issues

Glyph fonts are easy to use, but they lack precision.

Glyphs are rendered as fonts, not as vector images, so same glyph is rendered differently on different operating systems and even in different browsers on same operating system.

That makes it hard to align perfectly, so often icons look a bit weird.

Iconify was designed to solve those problems.

How does Iconify solve those problems?

Iconify has two features that solve those issues:

Load on demand

Iconify is first SVG framework to offer load on demand approach to loading icons.

Instead of loading entire icon sets, only icons used on page are loaded.

However this is not a simple solution. There are several issues that Iconify project had to solve:

Loading each icon separately strains resources, making page load slowly. Iconify solves that by loading icons in bulk as JSON instead of loading individual SVG files.

Then there is issue of caching. If different pages contain different sets of icons, loading icons in bulk means different API URLs for different pages, so it would load same icons again. Iconify solves this issue on multiple layers: API query parameters are sorted to try to make URLs the same to enable browser caching, icons are stored in session storage and local storage (session and local storage can be enabled/disabled in configuration). Additionally there is possibility of bundling icons with JavaScript files, which designer can use to put common icons in same files as theme scripts.

API software had to be created. Fonts and other SVG frameworks serve files as is, so developers can simply upload files on server and forget about it. Iconify API creates bundle of icons in milliseconds, including only icons requested by script.

Speed is important, so API was placed on multiple servers spread out across the globe to load as fast as possible.

Pixel perfect rendering and ease of use

Pixel perfect rendering is achieved by using SVG instead of font. SVG is rendered exactly the same in all browsers.

Problem with SVG is it is not as easy to use as fonts. Iconify solves this by using syntax similar to fonts. All designer needs to do is write a placeholder code, just like using glyph font. Iconify will load SVG content from API and replace placeholder with SVG.

What did Iconify achieve?

Designers are no longer limited to 1-2 sets of icons. Any mix of icons can be used on same page without loading multiple fonts.

Iconify can be configured to load custom icon sets from different API. API scripts are open source. That means designers can publish their own icon sets - free or commercial - and use them with Iconify instead of creating their own fonts/frameworks.

If you want to keep everything on your own servers without relying on third party, you can do that too. Iconify icons set and API are open source and available on GitHub. Instructions are available in documentation.

License

Iconify is dual licensed under Apache 2.0 license and GPL 2.0 license. You may select, at your option, one of the above-listed licenses.

Apache 2.0 license allows pretty much anything, including commercial use.

GPL 2.0 license allows use with more restrictive popular open source projects.

This license does not apply to icons. Icons are released under different licenses, see each collection for details. Icon collections available by default are all licensed under some kind of open source or free license, making it possible to use them in Iconify project.

Iconify is free, however servers hosting Iconify API do cost money. Currently there are 8 servers across the globe forming network of Iconify API. Each one of them costs money. If you want to support Iconify, consider purchasing a premium XenForo style or two.

If you want to keep everything on your servers as many would usually do with glyph fonts or if you want to host custom/premium icons, you can host everything on your website. API scripts (available for Node.js and PHP), icon sets and Iconify source code are all available on GitHub, tutorials are available in documentation section of this website.