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.

Integration

Currently Iconify is available only as JavaScript library for browsers. This makes Iconify usable on web pages. To use Iconify without relying on Iconify API there is possibility to host custom API and bundle icons with custom scripts.

Additionally when browsing icons, when you select any icon, you can copy or download SVG code. You can use it in editors or embed SVG directly into pages instead of using Iconify JavaScript.

Applications built with technologies such as React or Angular can use Iconify HTML syntax for browsers instead of dedicated components. Iconify JavaScript will replace placeholders generated dynamically by framework with SVG.

However in future it will change.

Plan is to create dedicated React and Angular components in early 2019. Support for other frameworks can be added too. What will be different from using current Iconify JavaScript? It will be proper components that generate SVG, not placeholders and generated bundle will include all SVG data. It will not require Iconify JavaScript. Of course you can continue using current placeholder syntax if you prefer. All integration methods planned for future will add new options, not replace existing options.

Additionally integration is planned for XenForo 2 forum software. It will feature icon picker component that will include icon search, custom option and style property types, custom XenForo template tags, making it easy to add icon pickers to third party styles and add-ons. This is currently in development, plan is to release it sometime late December 2018 or early January 2019.

Future

What will happen to Iconify in future?

Iconify is free and will always remain free. However servers cost money.

To help out with costs I plan to add premium icon sets in future. Those changes will not impact performance or quality of free icon sets. People purchasing premium icon sets will not get special treatment other than having access to those premium icon sets.

Plan is to make it possible for all designers to sell their premium icon sets, so designers would be able to make money. It should help out with server costs.

Iconify project has a long way to go. What you currently see is only beginning.

Use Iconify in your projects. Create and share icons. Link to Iconify project to spread word.