Iconify for Svelte offline use

Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?

If you do not want to use API, you need to provide icon component with data for all icons you are using. There are several options:

  • You can build icon bundles for icons that are used in your application, making icon data available offline.
  • You can use individual icon packages, which is similar to icon bundles, but import icons one by one and are easier to use.

See icon bundles for Iconify for Svelte documentation.

Offline component

Additionally, if you do not want to include API functionality, you can import component without API support. It is a bit smaller than full component.

In your code replace:

import Icon from '@iconify/svelte';


import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';

or, if you want to link to compiled component instead of .svelte file, use

import Icon from '@iconify/svelte/dist/offline';

Offline component has only the following functions available:

   import Icon, { addIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';
   // import Icon, { addIcon } from '@iconify/svelte/dist/offline';
   import bellFill from '@iconify-icons/bi/bell-fill';

   // Assign icon data to name "bell" used in first example
   addIcon('bell', bellFill);

       Icon referenced by name: <Icon icon="bell" inline=
{true} />
       Icon referenced by object: <Icon icon=
{bellFill} inline={true} />

Available icons

All icon sets available with Iconify API are available as standalone icon packages. There are over 100,000 icons from more than 100 icon sets.

If you want to use icon packages, as shown in example above, see icon packages documentation for more information.

Icon packages

Example above imports icon from package @iconify-icons/bi, which is a ES module.

If you are experiencing errors using packages from @iconify-icons, there are CommonJS packages with exactly the same data. To switch to CommonJS package, instead of @iconify-icons/bi use @iconify/icons-bi, so import line looks like this:

import bellFill from '@iconify/icons-bi/bell-fill';

Format for icon data packages:

  • ES package: @iconify-icons/{prefix}
  • CommonJS package: @iconify/icons-{prefix}

where "{prefix}" is icon set prefix. Use ES package whenever possible, switch to CommonJS package if your bundler does not support ES modules or if you need to use it in Node.js.

See individual icon packages documentation.