Performance optimization

Iconify is fast, but you can make it even faster by helping Iconify figure out what icons to load.

There are several ways to improve icon loading:

Pre-loading icons

If your page is likely to display additional icons after initial page load, such as AJAX forms or React/Angular application, you can tell Iconify to pre-load those icons, so when your script will display those icons Iconify would already have it in memory.

This also helps to reduce number of API queries. Loading icons in bulk is faster than loading them one by one.

To pre-load icons add this code anywhere after including Iconify script:

<script>
  Iconify.preloadImages(['mdi:home', 'mdi:alert', 'emojione:cat', 'flat-color-icons:print', 'flat-color-icons:like']);
</script>

Argument to Iconify.preloadImages is array of icons you want to load.

To use this function make sure either Iconify is placed in footer before </body> or loadBeforeDOMReady option is disabled.

Bundle icons

If your page already has JavaScript, you can bundle icons with it.

You can also use bundles to load custom icons that are not part of API. For example, this website includes logo in bundle that is not available on API.

Using localStorage

Iconify uses sessionStorage to store loaded icons. It stores icons in temporary browser storage that is deleted when browser window is closed. That helps Iconify to avoid loading icons that it has already loaded.

However if visitor is likely to visit your page again on some other day, sessionStorage cache no longer exists.

localStorage works the same as sessionStorage with major differences: cached content is stored in browser after browser window is closed and cache persists between browser tabs. That is much more efficient than sessionStorage.

So how come localStorage is not enabled? It is disabled by default because in some countries using localStorage requires displaying notice about cookies (you've probably seen them on some websites) and visitor agreeing to store cookies in his/her browser.

However if Iconify detects that page already uses localStorage, it will assume visitors has agreed to usage of cookies and will automatically enable localStorage.

If your page doesn't use localStorage, you can enable it using this code:

<script>
    Iconify.setConfig('localStorage', true);
</script>

Add that code anywhere on your page after including Iconify script.

You can also enable localStorage before including Iconify. Instead of using code above, use this code:

<script>
    // IconifyConfig object should be used to set configuration before including SimpleSVG
    // Iconify is not available at this point, so calling Iconify.setConfig would result in error

    // This is useful to set configuration if you are loading Iconify asynchronously

    // Override default configuration values
    window.IconifyConfig = {
        localStorage: true
    };
</script>
<script src="//code.iconify.design/1/1.0.0-rc5/iconify.min.js"></script>