Edit inline SVG in VS Code

Jump to a moment

Try the workflow

Install the IconVectors desktop application and its free Visual Studio Code extension. Use local desktop VS Code 1.101 or later on Windows or macOS. Visual editing uses your IconVectors license or available trial.

1. Install IconVectors

On Windows, open PowerShell or Windows Terminal and run:

winget install Axialis.IconVectors

Or use the Windows or macOS installer. Launch IconVectors to complete setup and sign in or start your trial.

2. Install the VS Code extension

Open SVG Editor — Axialis IconVectors on the Visual Studio Marketplace and choose Install to open it in VS Code. You can also open VS Code's Extensions view, search for axialis.iconvectors-integration, and install the extension published by Axialis. Follow any reload prompt.

If you prefer the VS Code command line:

code --install-extension axialis.iconvectors-integration

You can also install the bundled extension from IconVectors: choose File > Install Visual Studio Code Extension..., then Install / Update. Windows setup offers this option when VS Code is detected.

For offline installation, use Show Details > Show Package Folder in that dialog. In VS Code, choose Extensions > ... > Install from VSIX... and select iconvectors-vscode.vsix. Select the intended VS Code profile first if you use several profiles.

If the application isn't found, open the Command Palette and run IconVectors: Set Up Application.... Select IconVectors.exe on Windows or IconVectors.app on macOS. Run both applications under your normal user account.

3. Edit an SVG from your project

Open a trusted local project and place the cursor inside a static <svg> block. Open the Command Palette with Ctrl+Shift+P on Windows or Command+Shift+P on macOS, then choose Edit Inline SVG in IconVectors.

Make your visual change, then press Ctrl+S in IconVectors (or Command+S on macOS). The tracked block updates in the VS Code buffer while surrounding code stays in place. Save the host file in VS Code to write it to disk. Updates support Undo/Redo; Undo pauses the inline connection.

For standalone files, right-click an SVG in VS Code's Explorer and choose Edit SVG in IconVectors. For a local icon reference in HTML or CSS, use Edit Referenced SVG in IconVectors. The full guide covers all three methods, profiles and session recovery. Use local files; remote/WSL workspaces and dynamic JSX expressions are outside this integration.

The final video shot demonstrates the WinGet command in a VS Code terminal; its installation output is a replay.