How to Edit Icons with SVG Editor | SVGForge

6 min read svg-editor edit-svg-icons online-svg-editor svg-icon-editor edit-icon-svg svg-layers change-svg-color svg-export-jsx browser-svg-editor svgforge

Icons rarely ship in the exact color, size, or shape your UI needs. You might need a Lucide house in brand blue, a flipped chevron for RTL, or a thinner stroke for a dense toolbar. SVGForge’s SVG Editor is a free, browser-based studio for that work: load an icon, tweak it on a live canvas, and export code or raster assets—without installing desktop design software.

Editing runs 100% client-side. Your SVG stays on your device unless you choose to download, copy, or save a snapshot yourself.

What you can do in the SVG Editor

  • Load icons from the SVGForge library, a collection, or your own file (upload / paste)
  • Edit with Layers — select nodes, show/hide, or delete paths
  • Use the Inspector — fill, stroke, opacity, size, rotate & flip
  • Draw on the canvas — rectangle, circle, line, polyline, pencil, text
  • Undo / Redo while the tab is open
  • Export SVG, JSX, TSX, HTML, CSS, Data URI, plus PNG / WEBP

If you only need a quick recolor or resize, the public icon page also has a simple editor. For layers, drawing, and multi-format export, use Advance Edit to open the full studio at svgforge.dev/svg-tools/editor.

Step 1: Open an icon in the editor

Pick the path that matches your workflow.

Option A — From an icon detail page (fastest for library icons)

  1. Browse or search an icon on SVGForge (for example /icons/lucide/house).
  2. Use the simple controls if you only need size, color, or flip.
  3. Click Advance Edit.

You’ll land on something like:

Text
https://svgforge.dev/app/svg-tools/editor?icon=lucide:house

Option B — Pick Icon inside the studio

  1. Open the SVG Editor (or /app/svg-tools/editor when signed in).
  2. Click Pick Icon.
  3. Enter a key such as lucide:house, or use Browse sets to search.
  4. Load the icon onto the canvas.

Option C — Upload or paste your own SVG

  1. Open the editor.
  2. Upload a local .svg (up to 2 MB), or Paste SVG markup / a path fragment.
  3. Edit as usual, then export.

Empty canvas tip: Upload, paste, or pick an icon to start.

Option D — Continue an edited icon from a Collection

If you previously saved a snapshot:

  1. Open your collections dashboard.
  2. Click Edit on an item.
  3. The studio prefers the saved snapshot when present (marked edited).

Step 2: Edit the icon on the canvas

Adjust style in the Inspector

Select a layer (or work with the whole artboard), then:

Control Typical icon use
Colors — Fill / Stroke / None Match brand color; outline vs filled styles
Stroke width Thin icons for dense UIs
Opacity Subtle secondary icons
Size (presets 24–256, W/H, lock aspect, scale %) Align with your design system
Rotate & Flip RTL chevrons, orientation fixes
Border radius Soften rectangles or clip the whole mark

Clean up with Layers

Open the Layers panel to walk the SVG DOM tree:

  • Select a path or group
  • Show / Hide parts you want to preview without
  • Delete unused detail (watermarks, decorative nodes, extra strokes)

This is often enough to turn a busy illustration-style icon into a UI-ready glyph.

Optional: draw or add text

Use the floating tools when you need more than recoloring:

Select · Rectangle · Circle · Line · Polyline · Pencil · Text

Drag to move, use handles to resize, double-click text to edit. Shortcuts: Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z or Ctrl+Y redo, Delete / Backspace remove a layer, Esc cancel a tool.

Canvas comfort

  • Artboard background: Transparent / White / Dark
  • Zoom − / + / Fit, or scroll to zoom

History is local (roughly dozens of steps) and cleared when you close the tab—export or Save when you’re happy.

Step 3: Export for your stack

When the icon looks right, use the export bar at the bottom.

Code formats

For each format you get Copy and Download, with optional Show Code:

  • SVG — inline or static assets
  • JSX / TSX — React components
  • HTML / CSS / Data URI — docs, emails, CSS backgrounds

Raster for design handoff

Download PNG or WEBP at 1x–4x for Figma mocks, store assets, or places that still want bitmaps. (If WEBP isn’t available in the browser, the tool falls back to PNG.)

Save a Collection snapshot (signed-in)

  1. Click Save.
  2. Choose a Collection and set an icon key (prefix:name).
  3. Save snapshot (edited SVG up to 500 KB).

Re-open later from the collection with Edit—useful for iterating brand variants without losing work. Free accounts can keep a limited number of collections; Pro unlocks unlimited sets and bulk export.

Practical recipes

Brand-colored library icon
Advance Edit → set Fill in Inspector → Copy SVG or JSX.

Outline icon for a dark toolbar
Set Fill to None, Stroke to your light color, tune stroke width.

Simplify a complex icon
Hide/delete secondary layers until only the core mark remains → export SVG.

Add a badge or label
Draw a Circle/Rectangle, add Text, group visually with Select → export.

Handoff @2x / @3x PNG
Finish vectors → Download PNG at 2x or 3x.

Ship a smaller file
Export SVG, then run it through the separate SVG Optimizer. Optimization is not inside the editor—keep edit and minify as two steps.

License reminder

Editing or exporting a public icon does not grant extra rights. Icons remain under their upstream open-source licenses. Check the license on the icon set page before commercial use, and see SVGForge’s Terms for the full disclaimer.

Quick checklist

  1. Open the icon via Advance Edit, Pick Icon, or Upload / Paste
  2. Tweak Colors, Size, Rotate & Flip, and Layers
  3. (Optional) Draw shapes or text
  4. Copy / Download SVG, JSX/TSX, or PNG/WEBP
  5. (Optional) Save a collection snapshot; minify with SVG Optimizer before production

Try it now

Open the free online SVG Editor, pick an icon like lucide:house, and ship a variant that matches your product in minutes. Browse 368k+ free open-source icons on SVGForge whenever you need the next glyph.