ES Iconify Helper

Hover over any icon name in your code → click → done. No browser, no copy-paste, no manual edits.

Built for projects that use a local icon-sets.ts file to store offline Iconify SVG data. Whenever you reference an icon that isn't registered yet, this extension fetches it from the Iconify API and writes it directly into your file — without leaving your editor.

Features

☁ Add a single icon on hover

Hover over any icon name in a JSX prop or object property:

<Iconify icon="mdi:home" />

icon: 'hugeicons:access',

A hover popup appears with an Add to icon-sets.ts button. Click it — the icon is fetched from Iconify and written into your file instantly. A toast confirms success.

If the icon is already registered, the popup shows Already in icon-sets.ts instead.

⚡ Add all missing icons in a file at once

Open any file with multiple icon references and run:

Command Palette → Iconify: Add All Missing Icons in File

The extension will:

1. Scan the entire file for icon names
2. Skip any already registered in icon-sets.ts
3. Batch-fetch all missing ones from Iconify (grouped by prefix — minimal API calls)
4. Write them all in one pass
5. Show a summary toast: ✓ 5 added · 2 already existed · ⚠ 1 not found

The same button is also available directly in the hover popup when you hover over a missing icon.

Supported patterns

icon="mdi:home"              // JSX prop, double quotes
icon='mdi:home'              // JSX prop, single quotes
icon={`mdi:home`}            // JSX prop, template literal
icon={"mdi:home"}            // JSX prop, expression

icon: 'mdi:home',            // object property, single quotes
icon: "mdi:home",            // object property, double quotes
icon: `mdi:home`,            // object property, template literal

Works in .ts, .tsx, .js, .jsx files.

Setup

1. Configure the path to your icon-sets.ts

Open Settings (Ctrl+,) and search for iconify:

You can use a relative path (from workspace root) or an absolute path.

Monorepo? No problem — the extension searches all workspace folders automatically.

// .vscode/settings.json
{
  "iconifyHelper.iconSetsPath": "apps/web/src/components/iconify/icon-sets.ts"
}

2. Your icon-sets.ts format

The extension expects a file that looks like this:

export const iconSets = {
  'mdi:home': {
    width: 24,
    height: 24,
    body: '<path d="..."/>',
  },
  // more icons...
};

New icons are appended just before the closing };.

How it works

• Fetches from Iconify API — https://api.iconify.design/{prefix}.json?icons={name}
• No server required — direct HTTPS call from the extension process
• Duplicate-safe — never adds an icon that already exists
• Batch-efficient — bulk add groups icons by prefix, so 10 mdi: icons = 1 API call

Requirements

• VSCode 1.85+
• Internet connection (for fetching from Iconify API)
• A local icon-sets.ts file with the format shown above

Release Notes

1.2.1

• Fixed: insertion was still landing inside the satisfies {...} type block for some declaration styles (e.g. const ICONS: Record<string, IconData> = {...} satisfies Record<...>;) where the old anchor regex didn't match
• New approach: if a satisfies keyword exists anywhere in the file, the insertion point is found by scanning backward from it to the nearest } — this is correct regardless of how the object is declared (export default, export const, typed const, etc.)
• Falls back to brace-depth matching only when no satisfies clause is present

1.2.0

• Fixed: icons were being inserted in the wrong place for files using export default {...} satisfies {...} (the satisfies type block confused the old insertion logic)
• New icon-insertion logic uses proper brace-depth matching to find the actual closing brace of the icon object, regardless of what follows it (satisfies, plain ;, etc.)
• Now correctly supports both:

  export const iconSets = { ... };
  

  and

  export default { ... } satisfies { [key: string]: {...} };
  

1.1.0

• Added Add All Missing Icons in File command
• Batch fetch by prefix (fewer API calls)
• Summary toast with added / skipped / not found counts

1.0.0

• Initial release
• Hover to add single icons
• Configurable icon-sets.ts path
• Monorepo support
• Friendly error with Open Settings link when path is wrong

Author

Made by eddysapata