VS Code

Search icons in a VS Code panel and insert the class, component, Flutter widget or SVG for your file; with Pro, every style, stickers and illustrations.

as Markdown, for notes or an AI chat

The HubToolify Icons extension puts all 4,309 free Line icons in a VS Code panel. Search, click, and the extension writes the right code for the file you are in, with the import. The icons ship inside the extension, so search works offline and needs no account.

Install#

Install HubToolify Icons from the VS Code Marketplace, or search for HubToolify Icons in the Extensions view (Ctrl+Shift+X).

Insert an icon#

Open the HubToolify Icons panel in the activity bar, type to search, and click an icon. It goes in where your cursor is.
Or run HubToolify: Search and insert an icon from the Command Palette (Ctrl+Shift+P).
Right-click an icon in the panel to copy it as a CSS class, React, Svelte, Angular, Flutter, SVG or its name.

What gets inserted#

File	Inserted	Import added
JSX, TSX	`<HtiHome />`	`@hubtoolify/icons-react`
Svelte	`<HtiHome />`	`@hubtoolify/icons-svelte`, inside `<script>`
Dart	`HtiIcon(HtiIcons.home)`	`package:hubtoolify_icons`
HTML, PHP, Blade, Vue, Astro, Twig	`<i class="hti hti-home"></i>`
Anything else	The SVG

A second icon from the same package joins the existing import. To always insert one format, set HubToolify Icons → Default format in Settings. Tick colour in the panel to write the picked colour into the SVG, or pass it as color to the React, Svelte and Flutter components.

The CSS classes need the free stylesheet on the page. Run HubToolify: Insert the free icon CDN stylesheet to add the <link> tag.

Pro styles, stickers and illustrations#

With a HubToolify Pro plan, the panel also has the 14 Pro icon styles and the Stickers and Illustrations tabs. Choose Sign in for Pro at the bottom of the panel: your browser opens hubtoolify.com with a code to approve, and VS Code signs in within a few seconds. The token is kept in VS Code's secret storage and can only search and insert. Remove it any time under Account → Connected apps, or choose Sign out in the panel.

Pro icons go in like the free ones, with the Pro package import: @hubtoolify-pro/icons-react/slab, @hubtoolify-pro/icons-svelte/slab, package:hubtoolify_icons_pro/slab.dart, or the Pro kit class hti hti-slab hti-home. See Pro packages to install them.
Stickers and illustrations are saved into your project as SVG files, in public/hubtoolify when the project has a public folder and assets/hubtoolify otherwise (setting: Assets folder). The code that shows them goes in at the cursor: <img src="/hubtoolify/curious-cat.svg"> in HTML and JSX, an import in React when the file is not under public, the asset path in Dart.

The free Line icons keep working offline. Only the Pro artwork comes from hubtoolify.com.

Keyboard shortcuts#

The hubtoolify.insertIcon command inserts one icon by name, so you can bind the icons you use most to keys:

keybindings.json

// keybindings.json: Ctrl+Alt+H puts the home icon in, in the format for the file
{
  "key": "ctrl+alt+h",
  "command": "hubtoolify.insertIcon",
  "args": ["home"]
}

Privacy#

The free icons are part of the extension, and using them makes no network requests. Only when you sign in for Pro does the extension talk to hubtoolify.com, to search and download the Pro artwork you insert. It sends no analytics and never receives your name or email.