SVG Icon Editor for Developers
Create pixel‑perfect SVG icons on a 24 px/32 px grid. Live code export to SVG, React/TypeScript, Vue, XAML, C++. Batch export PNGs at 1×/2×/3×. Available for Windows & MaxOS. Free 30‑day trial.
Create pixel‑perfect SVG icons on a 24 px/32 px grid. Live code export to SVG, React/TypeScript, Vue, XAML, C++. Batch export PNGs at 1×/2×/3×. Available for Windows & MaxOS. Free 30‑day trial.
No bloat. Built in C++ for performance. Opens in seconds and handles icons with ease.
Instantly export icons as SVG, React, Vue, XAML, and more using the Live Code Viewer.
Use boolean ops, anchor editing, gradients, overlays and shadows made for UI icons.
Generate dark/disabled icons in 1 click. Organize complex icons using layers.
Axialis IconVectors is built for developers: Design on pixel-perfect grids, display ready-to-use code for Html, React, Vue, XAML, C++, and generate Optimized SVG or Bitmap assets that drop straight into your build.
Export raw, optimized SVGs ready for direct use in web or design systems. Keep stroke properties flexible for theming with currentColor.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
id="Icon" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"
stroke-linejoin="round" d="M2.5,9C2.5,2.45,9.99,3.03,12,7.5C14,3,21.5,2.55,21.5,9C21.5,
15.45,12,21.5,12,21.5C12,21.5,2.5,15.55,2.5,9z"/>
</svg>
Export fully minified SVGs to reduce file size and improve load times. Ideal for web apps and icon systems where every byte matters.
Minified SVG guide →
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5
15.6 2.5 9z"/></svg>
Export any icon as a React component, making it easy to drop directly into your code with full Typescript safety and reusability.
React TS guide →
<export function Icon(props: SVGProps<SVGSVGElement>) {>
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5
2.5 15.6 2.5 9z"/></svg>
)
}
Export any icon as a Vue component, making it easy to drop directly into your code with full Typescript safety and reusability.
Vue TS guide →
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5
2.5 15.6 2.5 9z"/></svg></template>
<script lang="ts">
export default {
name: 'Icon'
}
</script>
Export icons directly to XAML code, ready to use in WPF or UWP apps with crisp scaling and easy theming.
XAML guide →
<?xml version="1.0" encoding="utf-8"?>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Stretch="Uniform">
<Canvas Width="24" Height="24" Canvas.Left="0" Canvas.Top="0">
<Canvas x:Name="Icon">
<Path Data="M2.5,9C2.5,2.45,9.99,3.03,12,7.5C14,3,21.5,2.55,21.5,9C21.5,15.45,12,
21.5,12,21.5C12,21.5,2.5,15.55,2.5,9z" Fill="Transparent" Stroke="currentColor"
StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>
</Canvas>
</Canvas>
</Viewbox>
Export C++ SVG and render in native apps (wxWidgets/WinUI). Keep viewBox consistent for DPI scaling.
C++ guide →
static const std::string kSvg = R"SVG(
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5
2.5 15.6 2.5 9z"/></svg>
)SVG";
"I replaced Illustrator for icons. Finally, an editor built for developers, not artists."
— Alex M., Front‑end Dev
"IconVectors is the missing link between design and development. I save hours with the code export."
— Jane D., UI Engineer
"Super fast, clean interface, and the Live Code Viewer is brilliant. Best SVG tool for devs."
— Marie L., Software Designer
Download the fully-functional 30‑Day Free Trial and unlock your icon design workflow.
Version 1.10 - September 17, 2025
IconVectors opens and saves SVG files natively. You can also export to minified SVG, XAML, ReactTS, VueTS, C++, and various bitmap formats (PNG, ICO, JPG, BMP, TGA, TIFF, GIF, XPM, PCX, PNM).
Yes. IconVectors is fully compatible with SVG files created in apps such as Adobe Illustrator, Figma, and Inkscape. Imported transforms are applied to geometry for consistent results across frameworks.
Unlike general illustration tools, IconVectors is optimized for pixel-perfect icon design. It includes a built-in Live Code Viewer for SVG/React/Vue/XAML, fast batch export for multiple sizes, and one-click generation of theme/state variants.
The Live Code Viewer updates in real time as you edit your icon, showing clean code in multiple formats (SVG, ReactTS, VueTS, XAML, C++). You can copy snippets instantly for integration into IDEs like VS Code or Visual Studio.
Yes. You can open multiple editor windows (Shift+Ctrl+N) to work on icons side-by-side and copy elements between them. An automatic recovery system saves your work in the background and restores it after crashes.
Absolutely. IconVectors has a full Undo/Redo system. All actions — drawing, transforming, coloring, or editing paths — can be undone or redone, with no fixed limit in history.
A 30-day free trial is included. Licenses are perpetual (use forever) with 1 year of free updates. After that, you can renew updates at your convenience. One license covers multiple devices if you’re the primary user.
Yes. You can generate dark theme, hot (hover), and disabled versions automatically using the Icon menu. Overlays and shadows can also be added for status badges or indicators.