Developer Features

Axialis IconVectors was built with developers in mind. Beyond standard vector editing tools, it includes features that streamline integration into modern development environments — from web apps to native applications.

Live Code Viewer

IconVectors includes a real-time Source Code Viewer that shows the underlying code of your icon as you draw and edit. You can open it from the menu:

View ‣ Source Code - F3

Features include:

  • Live updates as you edit the icon

  • Tabbed formats: - SVG (editable) - Minified SVG - SVG Symbol - XAML (Microsoft format) - WPF Geometry - VectorDrawable - SwiftUI - VueTS - ReactTS - C++

  • Syntax highlighting for easy readability

  • Indent Code option to toggle between readable and compact view

  • Copy button to quickly place the code on your clipboard

Developer Code Targets

The following code targets are available directly from the Source Code tabs and are intended for framework-specific integration:

  • SVG This is the canonical editable output and matches the internal document model. Use it when you need full fidelity, clean interoperability with design tools, and long-term maintainability. It is also the best baseline for versioning and review in source control.

  • SVG Minified This output removes extra whitespace and reduces numeric precision to reduce payload size. It is ideal for production web delivery where transfer size and parse time matter. Keep the regular SVG as your source and generate minified output for deployment artifacts.

  • XAML This target converts vector data to Microsoft XAML so you can embed assets directly in WPF/UWP/WinUI workflows. It helps avoid runtime SVG dependencies in .NET desktop stacks. Use it when your UI pipeline already consumes XAML resources. Dashed and dotted strokes are exported with XAML dash styles, with SVG dash values normalized relative to the stroke thickness as required by XAML.

  • SVG Symbol This wraps icon geometry in a <symbol>-based structure for sprite systems and reusable icon registries. It is useful for web apps that reference icons repeatedly through <use> without duplicating path data. This improves consistency and can reduce final HTML size.

  • VueTS Generates a Vue-friendly TypeScript component template so icons can be dropped into Vue codebases with minimal adaptation. It accelerates integration in component libraries and design systems. Teams can standardize icon props and styling conventions around this output.

  • ReactTS Generates React TypeScript component code suitable for modern React application stacks. It is useful for direct import into component folders, shared UI kits, or mono-repo packages. Developers can immediately wire class names, props, and theming behavior in familiar React patterns.

  • C++ Produces C++ vector path data for native pipelines where icons are constructed programmatically. It is useful when assets are embedded directly in binaries or rendered through custom engines. This target is a good fit for low-level UI frameworks and tooling code.

  • WPF Geometry Generates compact geometry path data optimized for geometry-based rendering in WPF. It is useful when your icon system relies on Geometry objects instead of full XAML trees. This can simplify resource usage in highly dynamic desktop interfaces.

  • VectorDrawable Generates Android VectorDrawable XML output, including path geometry and paint attributes. It integrates directly with Android resource systems and avoids shipping raster variants for each density. Use it for native Android apps that expect res/drawable vector assets.

  • SwiftUI Generates SwiftUI drawing code that can be embedded in Shape/Path-based UI components. It is useful for Apple-platform apps that build icon rendering in native SwiftUI view hierarchies. This target enables code-level customization while keeping geometry sourced from the same icon document.

MCP Automation and AI Integration

The 2.10 server exposes 166 canonical underscore-named tools through the local MCP server, including the Editor, Explorer and batch PNG/ICO export, exact-color replacement, SVG versions, color adjustments, SVG optimization, currentColor conversion, centering/fitting, rotation/flipping, stroke outlining, per-paint automatic gradients and badge overlays (the 2.0 catalog contains 155). This is useful when you want an agent to create shapes, edit paths, inspect the current DOM, reuse palettes, render previews, navigate SVG folders, run safe batch starter operations, or export framework-specific code while preserving IconVectors’ own document model, rendering rules, and documented Undo behavior.

The integration is split into two processes:

  • IconVectors.exe owns the document, UI state, undo stack, and local bridge.

  • IconVectorsMcp.exe speaks MCP over stdio and forwards tool calls to the running editor.

Typical MCP-driven workflows include:

  • creating and editing SVG vector icons from natural-language instructions,

  • inspecting element structure before applying changes,

  • analyzing imported or AI-generated icons through document_analyzeCleanupSvg before export,

  • applying same-tone fill or stroke gradients through paint_autoGradient,

  • generating code targets through code_get,

  • exporting assets through the same export pipeline as the UI,

  • automating repetitive palette, badge, or layout operations.

See also:

Exporting Icons

To save your work in formats suitable for deployment, you can use various export commands from the File menu.

Export Minified

File ‣ Export ‣ Export Minified - Shift+Ctrl+M

Saves the icon in SVG format with:

  • Fewer decimals

  • No comments, spacing, or newlines

  • Optimized for smallest possible file size

Export to XAML

File ‣ Export ‣ Export to XAML - Shift+Ctrl+X

Converts your drawing to Microsoft’s XAML vector format, ideal for use in WPF or UWP applications.

Export to Bitmap

File ‣ Export ‣ Export to Bitmap - Ctrl+F3

Allows you to export the icon as a raster image in formats such as:

  • PNG - 32BPP RGB/Alpha Channel

  • Windows BMP - 32BPP RGB/Alpha Channel

  • Windows BMP - 24BPP Flat RGB Transparency

  • GIF - 8BPP Flat Indexed Transparency

  • JPEG - 24BPP Flat RGB

  • PCX - 24BPP Flat RGB

  • PNM - 24BPP Flat RGB

  • TGA - 32BPP RGB/Alpha Channel

  • TIFF - 32BPP RGB/Alpha Channel

  • XPM - 24BPP Flat RGB

You can adjust:

  • Output size in pixels or %

  • Background color and transparency

  • File format

Hint

When you select bitmaps without Alpha Channel, you need to specify a background/transparency color. Matt color is used in GIF to create smooth borders.

Export to Multiple Bitmaps

File ‣ Export ‣ Export to Multiple Bitmaps - Shift+Ctrl+F3

Need multiple versions of the same icon in different sizes or formats? Use this command to export a batch of icons with custom scale settings:

  • Select the target folder on the left

  • Define the base filename

  • Choose output sizes (e.g. 1x, 2x, 3x) or custom resolutions

  • Select formats (PNG, ICO, ICNS, etc.)

  • Icons are generated automatically into the selected folder

To create a subfolder, select its parent on the left and click New Folder. You can select a real drive or filesystem root, such as D:\, if you have permission to create folders there. The virtual Computer/Sections entry is not a filesystem folder and cannot contain new folders. The proposed name is New folder (numbered if that name is already taken). Type a name or keep the proposal and press Enter to create the folder and use it as the export destination. Press Esc during this initial edit to cancel: the provisional row disappears and no folder is created. Escape during an existing folder’s rename only cancels that rename; it never deletes the folder. Cancelling the export does not remove folders whose creation you already confirmed. Folder arrows are populated lazily for fast browsing: an unopened folder may show an arrow even when it is empty; expanding it updates the arrow.

The available bitmap file formats are:

  • PNG Icons (PNG) - 32BPP Alpha Channel Transparency

  • Windows BMP Icons (BMP) - 32BPP Alpha Channel Transparency

  • Windows BMP Icons (BMP) - 24BPP Flat RGB Transparency

  • JPEG Icons (JPG) - 24BPP Flat RGB

  • Windows Icons (ICO)

  • Mac OSX Icons (ICNS) - Selected sizes

Hint

When you select bitmaps without Alpha Channel, you need to specify a background/transparency color. Matt color is used in GIF to create smooth borders.

Remembered batch options and preview navigation

The 14 Explorer Batch Processing commands and Batch Rename each retain their valid option edits across uses and application instances, even if you cancel. Disabled fields retain their values too. A new options dialog reads the latest saved values; an already open dialog keeps its current edits. For the same option, the last saved valid edit wins.

Every existing batch preview has Back, immediately left of its execution button. Return to the options, adjust them, then preview a fresh plan. Back and Cancel do not write icon or output files, and remembered options do not skip source checks, collision checks, review, or explicit execution. Batch Rename retains its single dialog. See Remembering batch options and returning from preview.

This is a GUI convenience. MCP requests keep their existing explicit arguments and documented defaults; they do not inherit the last GUI settings.

Batch PNG and ICO from Explorer

To export several saved SVG files, select them in Explorer and choose Explorer ‣ Batch Processing ‣ Make PNG, ICO Bitmap Icons…. Choose PNG, ICO or both, their pixel sizes, an output folder and an optional filename suffix. PNG produces a file for each size; ICO produces one multi-size 32-bit file per source. The outputs have transparent backgrounds and leave the source SVGs unchanged.

Review the planned destinations before confirming. Save or exclude a selected source with unsaved Editor changes first. Existing outputs are protected unless you explicitly enable replacement. See Batch export to PNG and ICO for size limits, supported SVG inputs, naming and recovery behavior.

MCP offers explorer_batch_export_icons for this plan/apply workflow. To export only the active Editor document as a single- or multi-size ICO, use export with format:"ico" and a sizes list; see Exporting Windows ICO files. Neither export route adds an Editor Undo entry.

Batch SVG versions and color adjustments

Explorer also provides Make Icon Versions for separate Hot, Disabled and Dark Theme SVG copies, and Adjust Icon Colors for one reviewed color adjustment across saved source SVGs. They reuse the Icon-menu color engine and the existing batch preview and recovery safeguards. See Make Hot, Disabled and Dark Theme SVG versions and Adjust colors across SVG icons for options, source-preservation versus source-modification behavior, and limitations. The corresponding MCP tools are explorer_batch_make_icon_versions and explorer_batch_adjust_colors; both plan before applying filesystem writes.

Optimized and theme-aware SVG sources

Explorer’s Optimize SVG Files previews file-size savings from conservative formatting, hexadecimal paint and path-number compaction. Path-coordinate rounding is optional and can change appearance; only smaller results are written. Metadata, license comments, references and significant text are preserved. See Optimizing SVG files.

Convert to currentColor converts all supported solid colors or one detected RGB in fills/strokes, while preserving effective alpha and untouched resources. Authored color is retained with a warning when it limits theme inheritance. See Converting paints to currentColor for supported inputs and preview behavior. Both modify source files after review and have no Editor Undo. Their MCP tools are explorer_batch_optimize_svg_files and explorer_batch_convert_to_current_color.

Geometry variants without canvas changes

Explorer’s Center and Fit centers supported painted artwork or fits it proportionally inside equal SVG-unit margins. Stroke-inclusive bounds are conservative, so this is not optical centering; fitting scales strokes too. Rotate / Flip applies exact 90° left/right or 180° rotations, custom signed decimal angles, or horizontal/vertical mirrors about the existing canvas center. Custom angles are positive clockwise, negative counterclockwise; full turns wrap modulo 360. Canvas dimensions remain unchanged; custom rotation may clip artwork even on square canvases.

Both offer reviewed changes to originals or protected SVG copies with explicit destinations and suffixes. Neither has Editor Undo. Unsupported inputs remain untouched and are reported; source paths, metadata, definitions and symbolic paints are not flattened away to force success. See Centering and fitting artwork, Rotating and flipping artwork and Geometry output, review and limits for the exact boundary. The matching tools are explorer_batch_center_fit and explorer_batch_rotate_flip, with separate plan/apply calls; see Centering, fitting, rotating and flipping SVG files.

Batch base/overlay combinations

Use Add Badge Overlays to create one editable SVG for every combination of selected base icons and explicitly added overlay files. Set a nine-position anchor, proportional overlay size, edge margin and optional geometric badge cutout, then review each planned pair and destination. Output names use the base name and an editable per-overlay suffix. Source bases and overlays remain unchanged; outputs are not part of Editor Undo.

Preview and apply share immutable source checks, output-collision protection, staging and rollback. Unsupported combinations are reported rather than silently skipped or flattened. The corresponding MCP tool is explorer_batch_overlay_icons. See Add badge overlays for the options and safety boundary.

Clipboard Support

In addition to saving and exporting, you can copy the icon’s code to the clipboard in various formats, including:

  • Full or minified SVG

  • XAML

  • WPF Geometry / VectorDrawable / SwiftUI

  • React JSX or Vue template format

Clipboard-related commands:

  • Edit ‣ Copy - Ctrl+C

  • Edit ‣ Paste - Ctrl+V

  • Edit ‣ Copy Minified Code - Shift+Ctrl+C

This makes it easy to paste icons directly into your app code, UI components, or markup.

IDE and Tool Integration

Axialis IconVectors works smoothly with modern development tools, thanks to standard file formats and clipboard-friendly code. You can:

  • Copy/paste SVG code into editors like Visual Studio, VS Code, or WebStorm

  • Open or edit icons that originated from Adobe Illustrator, Figma, or Inkscape

  • Drag icons between IconVectors and other apps or file explorers