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

Real-Time Source Code Viewer spacer

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.

  • 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.

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

Export to Bitmap Dialog spacer

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:

Export Multiple Bitmaps spacer

  • 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

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.

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