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.

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 future versions offline bundle might be removed. It was created early in project development, when there were no alternative ways to use icons. Currently there are many ways to use icons in SVG and CSS without using Iconify API, so this offline bundle is no longer needed.

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} />

Do not mix "@iconify/svelte" and "@iconify/svelte/dist/OfflineIcon.svelte" in the same project! These are separate bundles.

Available icons

All icon sets available with Iconify API are available as standalone icon packages. There are over 150,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.