Tutorials

Latest tutorials

Conversions & Export

• Convert SVG to ICO

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

• Convert SVG to PNG

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

• Convert SVG to BMP

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

• Convert SVG to Android VectorDrawable

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

• Export Multiple PNG Sizes from One SVG

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

• Complete Windows App Icon Set

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

• Electron App Icons from One SVG

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

• PWA Icon Pack with Maskable Icons

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

• Switch to an SVG Favicon

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

• Safari Pinned Tab Mask Icon

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

• Minify and Optimize SVG Icons

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

Frameworks & Web

• Import SVG as React Components (Vite SVGR)

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

• Vue 3 SVG Icons with Vite

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

• Build an SVG Sprite from Icons

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

• Build an SVG Sprite for Vite, React & Vue

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

• How to Use SVG Icons in Web Applications

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

• SVG Icons in C++ Native Apps (WinUI, Qt)

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

• SVG Icons in C++ with NanoSVG

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

• SVG Icons in C++ with LunaSVG

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

• SVG Icons in wxWidgets C++

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

• React SVG Icons (use case)

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

• Vue SVG Icons (use case)

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

• XAML SVG Icons (use case)

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

• Native SVG Icons (use case)

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

• Minified SVG Icons (use case)

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

• C++ SVG Icons (use case)

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

AI-assisted workflows

• Generate Clean SVG Icons with AI

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

• How Developers Generate SVG Icons with AI

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

• Create an Info Icon with Codex CLI

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

• Using IconVectors with Codex CLI

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

• Using IconVectors with Claude

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

• Using IconVectors with VS Code Copilot

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

• Using IconVectors with Cursor

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

• Using IconVectors with Gemini CLI

  Register the 2.00 MCP server in Gemini CLI, narrow the 155 tools with includeTools, and keep trust off while you test.

• Using IconVectors with Kiro

  Point Kiro IDE or Kiro CLI at the local MCP server, turn on CLI Tool Search for the big catalog, and keep approvals on.

• Using IconVectors with Cline

  Add the server in the Cline extension or CLI, switch the CLI's auto-approve off, and make a first inspected edit.

• Using IconVectors with GitHub Copilot CLI

  Register the server with copilot mcp add, scope allow and deny rules per tool, and see why the cloud agent can't reach it.

• Drive Icon Explorer and Batches from MCP

  Have a coding agent open a folder in the Icon Explorer, list its icons, and run a plan-then-apply batch with approvals kept on.

Icon Explorer & Color

• Add Badge Overlays to a Whole SVG Icon Set New

  Combine every base icon with every badge in one batch: nine positions, size, margin, optional cutout, and a preview of each pair before the files are written.

• Make Hot, Disabled and Dark Theme Icon Versions New

  Generate the hover, disabled and dark theme variant of every icon in a folder with suffixes you choose, without touching the originals.

• Export PNG and ICO from a Folder of SVG Icons New

  Render PNG files at the sizes you list and one multi-size 32-bit ICO per icon, for a whole folder, with the output list previewed first.

• Make an Icon Set Theme-Aware with currentColor and Replace Colors New

  Convert a folder of icons to currentColor for CSS theming, or swap one exact color across the set, with two batch commands and a per-file preview.

• Shrink an Icon Library with Optimize SVG Files New

  Compact markup, hex colors and path numbers across a folder of SVGs, with planned savings per file and already compact files left byte for byte.

• Pick Colors from Any App with the Screen Eyedropper New

  Sample any pixel on screen with the Colors panel eyedropper and its magnifier: left-click applies it to Fill, right-click to Stroke.

• Review a Folder of Icons with New Icon and Auto Save New

  Open from the Explorer, edit, open the next, with Auto Save Icons writing for you and New Icon creating documents that already know their folder.

• Batch Process SVG Icons with Icon Explorer

  Apply a palette, resize, or restroke a whole selection of SVG files at once, with a validated plan before anything is written.

• Organize SVG Icon Folders with Icon Explorer

  Browse, filter, group into folders, batch rename, move, and delete icons without leaving IconVectors.

• Fill and Stroke Colors with the Colors Panel

  Define a color in HEX, RGB, or HSL, apply it with a left-click for fill or a right-click for stroke, and reuse recent colors.

• Even-Odd vs Non-Zero Fill Rules for SVG Icons

  Why holes vanish in compound paths, which fill rule to pick, and how to set it per path in IconVectors.

Fundamentals & Accessibility

• SVG Properties: Size and viewBox

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

• Pixel Perfect Icons the Easy Way

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

• Stop Blurry Icons: Pixel-Perfect SVG Setup

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

• Analyze and Clean Up Icons Before Export

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

• How to Edit SVG Icons

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

• Combine SVG Shapes with Boolean Operations

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

• Keep SVG Stroke Width Constant

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

• Make SVG Icons Themeable with CSS

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

• Accessible SVG Icons (ARIA Roles and Labels)

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

• Best Free SVG Icons for Developers

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