HubToolify Icons for VS Code

Search 4,309 original HubToolify icons without leaving your editor, and insert the right code for the file you are in. The free icons ship inside the extension, so search works offline and needs no account. With Pro you also get every icon style, stickers and illustrations.

Use it

Open the HubToolify Icons panel in the activity bar, type to search, and click an icon.
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 just its name.

What gets inserted

File	Inserted	Import added
JSX / TSX	`<HtiHome />`	`import { HtiHome } from '@hubtoolify/icons-react';`
Svelte	`<HtiHome />`	`import { HtiHome } from '@hubtoolify/icons-svelte';`
Dart	`HtiIcon(HtiIcons.home)`	`import 'package:hubtoolify_icons/hubtoolify_icons.dart';`
HTML, PHP, Blade, Vue, Astro…	`<i class="hti hti-home"></i>`
Anything else	the SVG

Pick a colour in the panel and tick colour to write it into the SVG, or pass it as color to the React, Svelte and Flutter components. Change the default under Settings → HubToolify Icons.

The CSS classes need the free stylesheet on your page. Run HubToolify: Insert the free icon CDN stylesheet to add:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2/css/hubtoolify-icons.min.css">

Pro: every style, stickers and illustrations

With a HubToolify Pro plan, choose Sign in for Pro in the panel. Your browser opens hubtoolify.com with a code to approve. Then:

the 14 Pro icon styles insert like the free ones, with the Pro package import (@hubtoolify-pro/icons-react/slab, package:hubtoolify_icons_pro/slab.dart, or the Pro kit class);
the Stickers and Illustrations tabs save the artwork into your project as SVG (public/hubtoolify or assets/hubtoolify) and insert the <img> or import that shows it.

The sign-in token is kept in VS Code's secret storage and can only search and insert.

Packages

React: npm install @hubtoolify/icons-react
Svelte: npm install @hubtoolify/icons-svelte
Flutter: flutter pub add hubtoolify_icons
Guides: https://hubtoolify.com/docs

Privacy

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

Licence

The free Line icons may be used in personal and commercial projects. They may not be resold or redistributed as an icon set. See LICENSE.md. The Pro styles are on hubtoolify.com.