Tutorials

How to Analyze and Clean Up Icons Before Export

By Axialis Team

Use IconVectors 1.50 to detect off-grid geometry, inconsistent strokes, hidden leftovers, empty groups, unused defs, and transform issues, then apply low-risk or full cleanup passes before export - Read More ->

How Developers Generate SVG Icons with AI (and Optimize Them with IconVectors)

By Axialis Team

Generate a cloud upload icon with AI, then clean path complexity, normalize stroke and geometry, and export production-ready SVG - Read More ->

Best Free SVG Icons for Developers

By Axialis Team

Compare popular free SVG icon sets, with svgicons.com as the preferred choice, then customize the icons in IconVectors and export clean files for your project - Read More ->

How to Use SVG Icons in Web Applications

By Axialis Team

Compare inline SVG, external SVG files, and SVG sprites, then see how to create and optimize clean web-ready icons with IconVectors - Read More ->

How to Edit SVG Icons

By Axialis Team

Compare raw SVG code editing with a visual IconVectors workflow for path edits, stroke control, alignment, and clean export - Read More ->

How to Generate Clean SVG Icons with AI (and Edit Them Properly)

By Axialis Team

Use AI through IconVectors MCP to create a copy icon directly in the live editor, then retouch paths, place the elements properly, and export clean assets - Read More ->

Create an Info Icon with Codex CLI

By Axialis Team

Follow the exact prompt from the MCP documentation, watch the MP4 and GIF demo, and reproduce the same info icon through Codex CLI - Read More ->

Using IconVectors with Codex CLI

By Axialis Team

Configure Codex CLI on Windows, macOS, or Linux, verify the connection, and start driving the live editor from prompts - Read More ->

Using IconVectors with Claude

By Axialis Team

Set up Claude Desktop on Windows or macOS, or Claude Code on Linux, and operate on the current icon document through MCP - Read More ->

Using IconVectors with VS Code Copilot

By Axialis Team

Add IconVectors to VS Code MCP configuration on Windows, macOS, or Linux, switch Copilot Chat to Agent mode, and let it create, inspect, and export icons - Read More ->

Using IconVectors with Cursor

By Axialis Team

Configure Cursor's local MCP settings on Windows, macOS, or Linux, verify the live editor connection, and run real drawing tasks through IconVectors - Read More ->

Complete Windows App Icon Set

By Axialis Team

Export a full Windows icon pack from one SVG—ICO (16–256) plus WinUI/UWP Visual Assets PNGs with scale qualifiers—and wire them into Package.appxmanifest – Read More →

Build an SVG Sprite for Vite/React/Vue

By Axialis Team

Generate a symbol sprite via a Vite plugin or the svg-sprite CLI, then reference icons with <use>. Production‑ready caching notes included – Read More →

Keep SVG Stroke Width Constant

By Axialis Team

Lock stroke width with vector-effect="non-scaling-stroke" and learn when to outline strokes in IconVectors for tiny sizes – Read More →

Accessible SVG Icons

By Axialis Team

Decorative vs informative, aria-hidden vs role="img" + labels, and keyboard focus rules—ready to copy patterns – Read More →

Vue 3 (Vite) — Inline SVGs as Components

By Axialis Team

Install vite-svg-loader, import ./icon.svg as a Vue component, and theme via currentColor – Read More →

React (Vite/Next) — Import Themable SVG Icons

By Axialis Team

Install SVGR, import ./icon.svg as a React component, and theme via currentColor. Works with Vite and Next.js – Read More →

Android: Convert SVG to VectorDrawable

By Axialis Team

Export a clean SVG in IconVectors and import it with Vector Asset Studio to generate VectorDrawables, with optional PNG fallbacks – Read More →

Electron/Desktop App Icons from One SVG (ICO + ICNS + PNG set)

By Axialis Team

Export ICO, ICNS, and PNG icon packs from one SVG in IconVectors, then plug paths into your electron‑builder config – Read More →

Use SVG Icons in wxWidgets C++ Applications

By Axialis Team

Load SVG from a string or file with wxBitmapBundle::FromSVG/FromSVGFile, convert to wxBitmap, and draw—starting from IconVectors SVGs – Read More →

Use SVG Icons in C++ Applications with NanoSVG

By Axialis Team

Import and render SVGs with NanoSVG: Windows HBITMAP, cross‑platform PNG export, and wxWidgets display — starting from IconVectors SVGs – Read More →

Use SVG Icons in C++ Applications with LunaSVG

By Axialis Team

Import and render SVGs with LunaSVG: Windows HBITMAP, cross‑platform PNG export, and wxWidgets display — starting from IconVectors SVGs – Read More →

Switch to SVG Favicon (+ minimal PNG fallbacks)

By Axialis Team

Export a minified favicon.svg and generate 16×16/32×32 PNGs + favicon.ico in one pass with IconVectors. Wire up modern link tags fast – Read More →

Safari Pinned Tab “mask‑icon” (SVG) from Your Logo

By Axialis Team

Prepare a pure‑black SVG, export minified in IconVectors, add rel="mask-icon" with your brand color, and verify in Safari – Read More →

Make PWA Icon Pack with Maskable Icons (from one SVG)

By Axialis Team

Generate 192/512 PNGs and maskable variants from one SVG in IconVectors, then wire them into manifest.json and test with Maskable.app – Read More →

Using SVG Icons in C++ Native Apps (WinUI / Qt / WinAPI LunaSVG)

By Axialis Team

Export in IconVectors, then render SVGs in C++ using WinUI, Qt and Windows API with LunaSVG – Read More →

Minify & Optimize SVG for Production

By Axialis Team

1‑click Minified export in IconVectors, plus a safe SVGO setup to keep viewBox and ship tiny, themeable SVGs – Read More →

Stop Blurry Icons: Pixel‑Perfect SVG Setup

By Axialis Team

Fix soft edges for good: align shapes to pixels, pick the right stroke widths, set a clean viewBox, and verify crisp exports in IconVectors – Read More →

Build an SVG Sprite from Icons Exported with IconVectors

By Axialis Team

Export clean SVGs in IconVectors, assemble a fast sprite with the svg-sprite CLI, and reuse icons with <use>—fully themeable via currentColor – Read More →

Batch‑Export SVG to Multiple PNG Sizes in One Go

By Axialis Team

Generate complete PNG packs from one SVG using presets (1×/2×/3×) and exact pixel sizes. Perfect for web, Electron/desktop, and favicon sets – Read More →

Convert a SVG Icon to BMP

By Axialis Team

Export crisp BMPs from SVG icons while choosing the right transparency mode (24BPP flat vs 32BPP alpha) and pixel‑perfect sizes. A quick, step‑by‑step workflow for IconVectors – Read More →

Make an ICO from SVG (Windows app icons & favicons)

By Axialis Team

Export a multi‑size Windows icon (.ico) directly from your SVG in IconVectors. Learn what the ICO format contains, recommended sizes, and how to generate app & favicon sets in one pass – Read More →

Convert a SVG Icon to PNG

By Axialis Team

Export crisp PNGs from SVG icons with smooth 32BPP Alpha transparency and pixel‑perfect sizes. A quick, step‑by‑step workflow for IconVectors – Read More →

Combine SVG Shapes with Boolean Operations

By Axialis Team

This tutorial explains how boolean operations combine shapes to create clean, production‑ready SVG icons. First, we’ll demystify the basic operations—Union, Subtract, Intersect – Read More →

Make Your SVG Icons Themeable with CSS using IconVectors

By Axialis Team

One of the most common developer pain points with SVG icons is that they don't respond to CSS color. Learn how to solve this issue using IconVectors – Read More →

React TypeScript Icons — Export Typed Components

By Axialis Team

Use Case - Generate typed React components with forwardRef, a11y labels, and currentColor theming. Drop them straight into your app – Read More →

Vue TypeScript Icons — Export Typed Components

By Axialis Team

Use Case - Create Vue SFC icon components with typed props and attribute fallthrough. Theme with CSS and ship one‑file‑per‑icon – Read More →

XAML Code Icons — Export Paths for WPF & WinUI

By Axialis Team

Use Case - Export Path data and use it in WPF/WinUI with themeable brushes, Foreground binding, and resource dictionaries for reuse – Read More →

Native SVG Icons — Export and Use in Your App

By Axialis Team

Use Case - Ship clean, accessible SVGs with inline markup or sprites. Control color with CSS (currentColor) and scale perfectly with a proper viewBox – Read More →

Minified SVG Icons — Export Smaller, Faster SVGs

By Axialis Team

Use Case - Keep visuals identical while trimming bytes. Ideal for large icon sets, inline SVG, and <symbol> sprites with excellent compression – Read More →

C++ Code Icons — Render SVG in Native Apps

By Axialis Team

Use Case - Render SVG with WinUI/Win2D on Windows or Qt’s QSvgRenderer cross‑platform. Package icons as resources and recolor at runtime – Read More →