Visual Studio Code Integration

The SVG Editor — Axialis IconVectors extension connects a local Visual Studio Code project to the desktop SVG editor. Open an SVG asset, its static reference in code or an inline SVG block; use IconVectors for visual editing, then return to your source. Your normal VS Code text editor remains available.

This integration is for Visual Studio Code, not Microsoft Visual Studio. It does not require AI, the MCP companion or the independent CLI. For Copilot and MCP setup instead, see Using IconVectors with VS Code / GitHub Copilot.

Install or update the extension

From Windows setup

During Windows installation, the Install Axialis IconVectors Extensions page offers Windows Explorer SVG thumbnails and previews and Edit SVG icons from Visual Studio Code. These are independent choices: the VS Code option is off by default, and you can enable either without enabling the other.

Setup checks for a usable VS Code Stable or Insiders installation for your normal desktop account before enabling the VS Code checkbox. If none is found, or setup cannot verify access to it, the choice stays disabled and unchecked; the status explains why. For a nonstandard installation, choose Browse… and select its installation folder. A valid selection enables the checkbox so you can choose whether to install the companion.

Portable VS Code installations use the manual Install from VSIX… route below. You can also finish setup and use IconVectors’ File command later.

If you select the VS Code option, setup opens the extension installation dialog after installing IconVectors, using your normal desktop account. Installation starts automatically after the selected VS Code installation is checked again. If that folder is no longer usable, the dialog keeps your choice for correction rather than silently switching to another installation. Follow its result and any reload prompt in VS Code. If setup cannot start this step for your desktop account, use the File command after opening IconVectors normally.

From IconVectors

Install desktop Visual Studio Code 1.101 or later and IconVectors on the same computer.
In IconVectors, choose File ‣ Install Visual Studio Code Extension…, immediately below Export to Multiple Bitmaps….
Select Visual Studio Code (Stable), Visual Studio Code (Insiders) or Custom VS Code installation…. For a custom target, Browse… selects the VS Code installation folder, or its .app bundle on macOS: not your project folder or an executable. Review the bundled extension version.
Choose Install / Update and wait for its result.
Check VS Code’s Extensions view for the installed version and follow any reload prompt it displays.

Choose More Info… to open this guide. Choose Show Details for installation output, manual instructions and Show Package Folder if you need the VSIX.

Installation uses the locally bundled VSIX, not a Marketplace download. Opening the dialog from the File menu does not start installation until you choose Install / Update. Extension 2.20.0 accompanies IconVectors 2.20. Application updates include the matching package but do not automatically install or update it in your VS Code profiles. After updating IconVectors, use the File command to install the matching companion where needed. The installation command is available from both Editor and Explorer without requiring an open or modified icon. It installs the Visual Studio Code companion, not a Microsoft Visual Studio add-in.

Automatic installation targets the current OS user’s Default profile, not every profile or a system-wide administrator location. Run IconVectors normally rather than elevated/root. A portable VS Code installation uses the manual route so that its data/profile scope stays explicit. If discovery is ambiguous, the target cannot be used safely or installation fails, use the manual instructions and Show Package Folder.

After two minutes without a completion result, the dialog reports that the outcome is unknown and allows you to close it. This does not stop the installer or roll back its work; check VS Code before retrying.

Manual installation

In the intended VS Code window/profile, open Extensions, choose Install from VSIX… from its menu and select the bundled iconvectors-vscode.vsix. Use VS Code’s profile selector first if you want a profile other than Default. On Windows, the package is in the application’s Integrations subfolder. Use Show Package Folder in the Visual Studio Code installation dialog to find the correct package rather than an unrelated older copy.

The extension’s Details page includes application screenshots hosted on the official Axialis websites. Those images need an internet connection; local editing remains available when the images cannot load.

On Windows, the extension normally finds an installed IconVectors automatically. Installing the companion through IconVectors also records that application’s location for your Windows user, which helps when using an unregistered test or portable copy. An explicit iconvectors.executablePath setting takes precedence; this discovery hint does not replace your VS Code settings. Reload VS Code if necessary after changing which copy you use.

If VS Code cannot find IconVectors afterward, run IconVectors: Set Up Application… or set iconvectors.executablePath to the installed desktop executable (or its .app bundle on macOS). This is a local machine setting, not a workspace shell command. Do not configure the CLI executable or MCP companion as the visual editor.

The extension operates in trusted local desktop workspaces. Remote SSH, WSL, containers, Codespaces, virtual filesystems and browser-based VS Code are not supported by this handoff. A remote project path is not silently treated as a local file.

Edit an SVG file

Use Edit SVG in IconVectors from an SVG file’s Explorer context menu, editor title or the Command Palette’s IconVectors commands. A context-menu action opens the file you invoked it on, even if another editor tab is active.

Save unsaved VS Code changes first. If the extension offers Save and Open, accept it only when you want those edits written to disk; cancelling or a failed save does not launch an older disk copy as though it contained your latest work. An untitled document needs a real filename, or use the inline workflow below.

Edit visually in IconVectors and save normally. VS Code then handles the changed disk file using its normal reload/compare behavior. An existing IconVectors window may be activated; its unsaved-work and external-change safeguards still apply. The extension does not replace an unrelated open icon or force a reload.

Important

File editing uses ordinary disk saves, not a VS Code Undo transaction. If you modify the file in both applications, use the normal conflict/compare choices. Do not assume that one editor has automatically replaced the other’s unsaved buffer.

Open a referenced SVG or icon folder

Place the cursor on a supported literal reference and use Edit Referenced SVG in IconVectors. This includes local HTML references, CSS url(...) values and static JavaScript/TypeScript asset imports. A query string or fragment is ignored for the file lookup, not removed from your source reference.

Ambiguous candidates require a choice. Dynamic expressions, project scripts, JSX/TSX rewriting, bundler aliases and remote/data URLs are not evaluated to guess an asset. An outside-workspace file requires an explicit decision.

Use Open Folder in IconVectors to browse a selected local directory in the built-in Icon Explorer. This opens the native Explorer rather than building a second project browser inside the extension.

Create a new icon in the project

Use New SVG Icon Here… on the destination folder. Choose a filename, canvas size and a blank, fill or line starting template. Presets include 16, 20, 24 and 32 pixels, with a custom-size option. Choose symbolic currentColor or an explicit color for the template, then open the new file in IconVectors.

Creation does not silently overwrite an existing project file. Review the destination and use another name when a collision is reported. Subsequent editing and saving follow the normal file workflow.

Edit an inline SVG

Use this workflow for one self-contained, static <svg>...</svg> block in HTML, XML, SVG or Markdown. In plain text, select the block explicitly. Select the exact block, or put the cursor in a supported enclosing SVG and invoke Edit Inline SVG in IconVectors. JavaScript strings, JSX/TSX, framework bindings, scripts and non-self-contained dependencies are not executed or rewritten.

The host document must already have a filename; its unsaved buffer edits do not have to be saved first. Automatic updates are the default:

The extension associates that source block with a private exchange SVG and opens it in IconVectors. The surrounding source is untouched.
The native window identifies the host, for example Inline SVG — test.html. Edit the icon, then choose Update Inline SVG in test.html, or press Ctrl+S (Command+S on macOS).
After a stable, supported save passes the source checks, the extension updates only the tracked block in the open VS Code buffer. It does not switch editors, take keyboard focus or move your cursor.
Keep editing and saving. Each distinct accepted update is one VS Code Undo step; duplicate unchanged saves add no edit. Updates are save-triggered, not sent continuously while you draw.
Close the inline IconVectors window when you are done. With the matching application and extension, its confirmed close ends that source association automatically. Cancelling the close keeps the session open.

Several inline SVGs can have independent native windows, including different blocks in one host file. Closing one ends only its association; the other windows continue working. Opening that block again after a confirmed close starts a fresh session without reactivating old recovery artwork.

While a window remains open, reopening the same still-valid tracked SVG reuses its session and native document. A paused or conflicting association requires an explicit recovery/restart choice; it is not silently attached to another similar-looking block.

The native Save action still writes only the private exchange SVG, never the host HTML or other source file. Its contextual name helps identify your work; it is not confirmation that VS Code accepted the result. A paused session, pending review or closed IDE can prevent that return. Normal Save As… to a different path creates a standalone SVG, removes the native inline context and ends the old association. Successfully replacing that window’s document also ends its old association; a failed or cancelled operation does not.

The returned block contains the SVG root, not a standalone XML declaration, DOCTYPE or generator text surrounding it. Neighboring code and its line endings remain outside the edit; the returned SVG uses the host editor’s line-ending convention. Unicode or a longer/shorter result does not change which source range the extension owns. IconVectors can reformat code inside the SVG itself.

Important

An inline update edits the VS Code buffer; the extension does not save the host file. Your normal VS Code Auto Save setting still applies and can save the edited buffer. The extension does not disable or bypass that setting.

Do not edit the same block simultaneously while editing it externally. Changes outside the block can be tracked conservatively, but edits inside or on its boundary, ambiguous changes and races pause updates instead of overwriting newer source. Undoing an imported update in VS Code also pauses the session, so the next native save cannot simply restore what you just undid.

Optional review before applying

In VS Code’s User Settings, enable Review inline changes before applying (iconvectors.reviewInlineChanges) if you prefer to inspect every saved result. This machine/user preference is off by default; workspace/folder settings cannot override your decision. Changing the setting alone does not apply a pending result.

With review enabled, a stable result waits. Use Review Inline Result… to inspect its source diff, then Apply Reviewed Inline Result… to accept that exact candidate. A newer result needs fresh review. The same source-conflict checks and one-step Undo apply, and later saves can be reviewed while the native association remains open. If you close before accepting a result, the unaccepted artwork remains an inactive recovery item to review or copy, not an automatic update. With review off, subsequent native saves or explicit result actions can update automatically only while the source association remains valid.

Closing an inline window and retained artwork

An accepted native close, or detaching its inline document, ends the source binding independently of deleting recovery files. If you choose Save during close, the extension makes a final bounded read so that a last save is not lost merely because its normal notification was still waiting. Automatic mode can accept that result only if all the usual source checks pass. Close never bypasses Review, conflicts, local Undo or an invalid result.

Clean, acknowledged work can be removed automatically only after a confirmed normal close or successful document detach, when the exact host source still matches and the host document is already saved. Unexpected window destruction can end a binding, but does not confirm the normal Save/Discard procedure; its artwork is retained. If the VS Code buffer is unsaved, the session’s SVG recovery material remains. A later normal host Save may allow cleanup after the same exact-source checks; the extension never saves the host file for this purpose.

Pending review, conflicts, unaccepted artwork and uncertain results remain as inactive recovery items. They no longer own or block the source range, but are not silently applied or revived as an old binding. Keep or copy valuable artwork before explicitly removing a recovery item.

An older application, a crash or missing/corrupt ownership information cannot prove that a window closed normally. Those cases remain unknown/recoverable. The exit of the initially launched process is not a window-close signal: another IconVectors window may own the icon.

Session controls and recovery

Use the IconVectors session actions in VS Code to return to source, review or refresh a result, recover a session and finish it explicitly. Session status distinguishes automatic updates, pending review, paused/conflicting source and unavailable results; it is not a claim of a live MCP connection.

Return to Inline Source… reveals the source associated with that session.
Refresh Inline Result… rereads the result if a save notification was missed. IconVectors can save by replacing a file atomically; a watcher notification is not itself proof of a complete, valid candidate. Refresh does not clear a source pause.
If you used Save As to another location, use Choose Result SVG for Inline Session… explicitly. The extension does not silently follow a different file. Choosing a result does not clear a source pause or reactivate a closed/detached binding; after retirement it is recovery artwork to review or copy.
Reloaded active sessions start paused. Recover Inline Session… explicitly validates the exact current source before resuming. In automatic mode, a valid pending result can then update the buffer; review mode still waits for review and confirmation. A confirmed closed/retired record remains inactive artwork, not a resumable binding. Nothing is applied merely because VS Code starts or reloads.
Finish Inline Session… is available for explicit cleanup, especially retained recovery items. It cannot remove files claimed by a live native owner: close the actual inline window first. Unknown/crashed ownership needs the stated recovery checks, not an assumption that a launched process exited.

Keep a separate copy of valuable work before discarding a candidate or removing its session. A conflict or invalid/missing result pauses updates and retains recoverable artwork. Follow the explicit recovery/restart choice rather than repeatedly saving or forcing a stale result into source. Older retained sessions whose exact source association cannot be established remain artwork to recover, not a guessed live binding.

When updating from older 1.0/1.1 companions, sessions without native close tracking become inactive unknown backups. Starting Edit Inline SVG in IconVectors again uses a fresh session automatically instead of reusing that older binding. The old artwork is not automatically applied or deleted; review or copy it before explicitly removing its backup. Its older native window might still be open and cannot be assumed to report closure: close it before cleaning up the old files. Migration does not claim that this old window closed normally.

The extension allows up to 16 active bindings within a 128-record reserved recovery capacity, including active-session backups. Active windows reserve space so closing them cannot require discarding unsaved artwork. Unknown or corrupt stored records also consume capacity. A quota warning refuses new sessions rather than evicting existing work. Save your host documents and review/copy/finish retained items using the offered commands; do not delete session files behind a live window.

Troubleshooting and boundaries

IconVectors is not found: review the executable path in the extension’s local settings. It must point to the desktop application, not its CLI or MCP server. Check that the selected VS Code edition/profile actually has the extension installed.

Commands are unavailable: check workspace trust and that this is a local desktop workspace with a supported file/source selection. Merely opening a workspace or hovering an asset does not launch the native editor.

Inline-session storage is unavailable: session editing needs writable local storage in the current VS Code profile. Application setup and ordinary file/folder editing remain available independently. Review the diagnostic and profile permissions; do not delete retained session files to try to enable the commands. If application setup itself reports Local extension storage is required, install the matching current companion and reload VS Code.

The result is missing or invalid: save the exchange SVG in IconVectors, refresh the session, or explicitly choose the result if you used Save As. The extension does not apply incomplete or unsupported markup as a successful return.

Updates are paused or the source changed: compare the retained candidate with your current code. Resolve the conflict deliberately and use explicit recovery/restart when appropriate. Refresh, choosing a result or changing the review setting does not authorize overwriting newer source.

Finish reports a live native owner: close that inline IconVectors window, resolving its Save/Discard choice, before removing its files. A cancelled close does not end ownership. For a crash or unknown state, follow the recovery diagnostic; never treat the original launcher’s exit as proof that cleanup is safe.

This companion does not embed the canvas in VS Code or mirror every drawing edit through a two-way live service. Inline return is a guarded, save-triggered update. For independent file checks and PNG/ICO jobs, use the Command-Line Interface. For agent-driven workflows, use MCP Integration; these are separate integrations.