Iconify for Vue 2 function: addIcon

This tutorial is part of Iconify for Vue 2 functions tutorial.

Function addIcon() adds one icon to component's icons storage.


Function has the following parameters:

  • name, string. Icon name.
  • data, IconifyIcon. Icon data.

Function returns boolean value: true on success, false if something is wrong with data.


import { addIcon } from '@iconify/vue2';

addIcon('mdi:account-box', {
   body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
   width: 24,
   height: 24,

Note: icons added by this function are not cached in localStorage and sessionStorage.

API provider

API provider parameter can be used to load custom icons asynchronously without triggering API queries.

Each API provider has its own API endpoint, so if you are using custom API provider that component doesn't have configuration for (currently by default component has no API providers configured), component will not attempt to load missing icons from an unknown API provider.


import { addIcon } from '@iconify/vue2';

addIcon('@custom:md:test', {
   body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
   width: 24,
   height: 24,

Code above adds the following icon:

  • provider is "custom".
  • prefix is "md".
  • name is "test".

In component template this icon can be used like this:

<Icon icon="@custom:md:test" />

Syntax is similar to default icon syntax, but with API provider "@custom" in icon name. See API providers documentation for details.

One icon

This function adds one icon in IconifyIcon format.

If you want to add several icons or you have IconifyJSON data, use function addCollection() instead.