IconOven Icons for VS Code
Search 85,000+ IconOven icons without leaving the editor and insert them where your cursor is.
Commands
- IconOven: Search icons — type a name, a tag or an old icon name. Pick an icon, then pick how to insert it:
- SVG markup
- React JSX (
<HomeIcon />, with import { HomeIcon } from '@iconoven/react' added to the file)
- Vue and Svelte components from
@iconoven/vue and @iconoven/svelte, and Angular <svg ioIcon [icon]="home"> from @iconoven/angular
- Web component (
<iconoven-icon name="home"> from @iconoven/web-component)
- The icon name only
- IconOven: Insert last icon — inserts the icon and format you picked last.
- IconOven: Enter Pro licence key — unlocks the 12 Pro styles with a seat key from your IconOven order page.
- IconOven: Remove Pro licence key — forgets the key on this machine.
With no editor open, the snippet goes to the clipboard. In JavaScript and TypeScript files we add the import line under your existing imports; in Vue, Svelte and Astro files it goes inside the script block.
Settings
| Setting |
Values |
Default |
iconoven.defaultFormat |
ask, svg, jsx, vue, svelte, angular, webcomponent, name |
ask |
iconoven.strokeWidth |
1, 1.5, 2 |
1.5 |
iconoven.corners |
rounded, sharp |
rounded |
iconoven.variant |
stroke and the 12 Pro styles, including pop |
stroke |
Styles and licence
Stroke is free under the MIT licence and always works offline.
The other 12 styles need an IconOven Pro licence: Tinted, Gradient, Duotone, Twotone, Solid, Bulk, Solid Twotone, Solid Gradient, Line Duo, Hybrid, Color Outline and Pop. What works today:
- SVG markup. Run IconOven: Enter Pro licence key once. The key is checked with iconoven.com and kept in VS Code's secret storage. The style data downloads from iconoven.com and is never bundled. After that, SVG inserts draw the Pro style you chose. Without a key, choosing a Pro style offers to enter one; otherwise Stroke is inserted.
- Pop is ready-made colour SVG, so it always inserts as SVG markup, whatever format you pick. Its data (about 10 MB) loads the first time you use it in a session.
- React, Vue, Svelte, Angular and web component snippets add the
variant prop (for example <HomeIcon variant="duotone" />). The prop draws the Pro style only when your app renders with the @iconoven-pro/icons package. With the free packages alone it draws Stroke.
- The key is checked again once a week. Offline, it keeps working; a refunded or cancelled key is removed.
Build
From the repository root:
node extensions/build.ts vscode
npx tsc --noEmit -p extensions/vscode
The bundle lands in dist/extension.cjs with the Stroke icon data inside, so Stroke needs no network access. Pro styles download with a licence key.
| |
