Iconify for Vue 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 Vue 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/vue2';


import { Icon } from '@iconify/vue2/dist/offline';

Offline component has only the following functions available:

       <p>Icon referenced by name: <Icon icon="bell" :inline="true" /></p>
       <p>Icon referenced by object: <Icon :icon="bellIcon" :inline="true" /></p>


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

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

export default {
   components: {
   data() {
       return {
           // Assign icon data to variable "bellIcon" used in second example
           bellIcon: bellFill,

Do not mix "@iconify/vue2" and "@iconify/vue2/dist/offline" 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.