Tutorials

Export a multi-size Windows .ico from one SVG, with the right sizes for desktop apps and favicons.

Rasterize an SVG to a crisp PNG with 32BPP alpha, at pixel-perfect sizes for stores, docs, and email.

Export BMPs from SVG icons, choosing 24BPP flat or 32BPP alpha transparency at the sizes you need.

Prepare a clean SVG and import it with Vector Asset Studio, avoiding the SVG features VectorDrawable drops.

Batch-export a full PNG pack from one SVG using 1x/2x/3x presets or exact per-platform sizes.

Produce a full Windows icon pack (ICO plus WinUI/UWP visual assets) from a single SVG source.

Generate ICO, ICNS, and PNG packs from one SVG and wire the paths into your electron-builder config.

Export 192/512 PNGs and padded maskable variants from one SVG, then wire them into the web manifest.

Ship the complete modern favicon set from one SVG: SVG favicon, ICO, PNG fallbacks, apple-touch-icon, and manifest.

Prepare a pure-black SVG and add rel=mask-icon with your brand color for a crisp pinned tab in Safari.

One-click minified export plus a safe SVGO setup that keeps the viewBox and ships tiny, themeable SVGs.

Set up vite-plugin-svgr to import SVGs as typed React components, avoiding the default-export and viewBox pitfalls.

Install vite-svg-loader, import an SVG as a Vue component, and theme it with currentColor.

Assemble a cacheable sprite with the svg-sprite CLI and reference icons with use, themeable via currentColor.

Generate a symbol sprite through a Vite plugin or the svg-sprite CLI, with production caching notes.

Compare inline SVG, external files, and sprites, then create and optimize clean web-ready icons.

Render SVGs in C++ with WinUI, Qt, and the Windows API using LunaSVG, starting from IconVectors exports.

Import and render SVGs with NanoSVG: Windows HBITMAP, cross-platform PNG export, and wxWidgets display.

Import and render SVGs with LunaSVG: Windows HBITMAP, cross-platform PNG export, and wxWidgets display.

Load SVG with wxBitmapBundle::FromSVG, convert to wxBitmap, and draw, starting from IconVectors SVGs.

The React pillar: choose between inline SVG, SVGR components, and sprites across DX, size, theming, and accessibility.

Create Vue single-file icon components with typed props and attribute fallthrough, themed with CSS.

Export Path data for WPF and WinUI with themeable brushes, Foreground binding, and resource dictionaries.

Ship platform-native SVG on the web and desktop, from inline and sprite markup to C++, Electron, and XAML.

Trim bytes while keeping visuals identical, ideal for large sets, inline SVG, and symbol sprites.

Render SVG with WinUI/Win2D or Qt QSvgRenderer, package icons as resources, and recolor at runtime.

Use AI through IconVectors MCP to draw an icon in the live editor, then retouch paths and export clean assets.

Generate an icon with AI, then clean path complexity, normalize geometry, and export production-ready SVG.

Follow the exact MCP prompt to reproduce an info icon end to end through Codex CLI.

Configure Codex CLI on Windows, macOS, or Linux and drive the live editor from prompts.

Set up Claude Desktop or Claude Code and operate on the current icon document through MCP.

Add IconVectors to the VS Code MCP config, switch Copilot Chat to Agent mode, and create icons.

Configure Cursor local MCP settings, verify the editor connection, and run real drawing tasks.

Walk the SVG Properties dialog and learn why width and height are not the viewBox, and how each affects scaling.

Learn the 1px and 2px stroke rules, then snap any icon to the grid with one-click Pixel-Align Selection.

Align shapes to pixels, choose the right stroke widths, set a clean viewBox, and verify crisp exports.

Detect off-grid geometry, stray strokes, hidden leftovers, and unused defs, then apply cleanup passes.

Compare raw SVG code editing with a visual IconVectors workflow for paths, strokes, alignment, and export.

Use Union, Subtract, and Intersect to combine shapes into clean, production-ready icon geometry.

Lock stroke width with vector-effect non-scaling-stroke, and know when to outline strokes for tiny sizes.

Switch fills and strokes to currentColor and CSS variables for one file that themes across light and dark mode.

Decide decorative vs meaningful, then apply aria-hidden or role=img with labels, with a testing checklist.

Compare popular free SVG icon sets, then customize and export clean files for your project in IconVectors.