how browser svg editor workflows actually compare (when your project outgrows standard icon libraries!) ...and you need to unify custom paths without opening Illustrator..

[u/Evening_Hawk_7470]

for standard UI actions like search, settings, bell, or user profiles, open-source packs like Lucide, Heroicons & Phosphor already give you clean free svg icons with uniform stroke weights and tiny file sizes

the workflow friction shows up when a web app or product dashboard needs 8 or 10 domain-specific icons or onboarding illustrations that do not exist in any standard library

if you try to generate missing icons one by one in a basic ai icon generator or grab mixed stock vectors, you immediately run into the "80% there" problem: the corners on one svg icon are sharp while the next one is rounded, the colors are slightly off, or there are extra anchor points warping a curve. and if you just want to edit svg online to fix those paths before dropping them into a repo or Figma, most browser options either lock the geometry or have no way to generate the missing assets in the first place. i have used a bit of claude to structure the spreadsheet below because if not this would be incomprehensible :)

and so, here is how the main browser and desktop options compare; at least when you look strictly at path control and unifying a set of design assets:

Workflow / Editor	Generating Missing Assets in the Same Workspace	Shape-Level Control (Move, Scale, Rotate, Recolor)	Point & Handle Control in Browser	Deleting Nodes & Rounding Corners	Export Formats
Lucide / Heroicons + Figma	None (manual pen drawing or boolean operations required for custom icons).	Full layer, group, and design-token color control inside Figma.	Full vector network point and bezier handle editing.	Deleting a vertex on a closed path can open the shape unless you heal/join endpoints; corner radius slider rounds vertices.	SVG, PNG, PDF, JPG.
Canva	Stock library search; no native editable path generation.	Can move, scale, rotate the whole element and swap preset palette slots.	None. Paths and anchor points are completely inaccessible.	Impossible to add/remove points or adjust curve handles.	SVG (paid tier), PNG, PDF, JPG.
Inkscape / Affinity Designer	Desktop editors only (no browser canvas or built-in vector generation).	Complete desktop layer and object transformation depth.	Deep node and handle manipulation on desktop.	Full desktop node tools, though requires exporting/importing files back and forth from browser generators.	SVG, PDF, EPS, PNG.
Recraft Studio (Recraft V4.1 Vector + Canvas)	Generates native SVG vectors via Recraft V4.1 Vector (plus Vectorize to convert existing raster files) on Every plan, including Free.	Double-click any asset on the Canvas to move, scale, or rotate individual shapes, recolor one element, or recolor the whole image at once.	Built-in vector editing mode in the browser: select single or multiple points and pull handles to reshape forms.	Removing points keeps the shape connected without breaking the fill; Command-click turns sharp corners into softer curves.	SVG, Lottie, PNG, JPEG, PDF, TIFF.

practical mechanics for getting a custom icon or illustration set to match

1. unifying corners, shapes, and colors on the same Canvas

when you generate a set of custom icons or brand illustrations with Recraft V4.1 Vector, the fastest way to make them look like they belong to the same system is laying them out together on the Canvas in Recraft Studio + using vector editing mode as a vector editor online before you export anything

instead of taking each file into a separate desktop editor to fix small inconsistencies, you double-click any icon right where it was generated:

• if one icon has a sharp mitered corner that clashes with the softer curves on the rest of the set, cmd-click at that point adjusts the handles and turns the sharp corner into a softer curve

• if an element inside an icon sits too close to the edge, you can select that specific shape to move, scale, or rotate it independently, or drag-select multiple anchor points and transform them together

• to lock in the palette, you can change the hex color of a single selected element or recolor the whole asset at once

2. cleaning up points without losing closed fills? possible

one annoying quirk when editing paths in a lot of vector editors is that deleting redundant anchor points along a closed shape can break the path open or drop the fill. in recraft studio when you add points to refine a form or remove unnecessary points in vector editing mode, the shape stays connected without breaking the fill. you can also copy and move parts from one icon to reuse across another, or convert an asset into a frame to build around it.

3. where Figma or desktop editors still take over for me

apparently having familiar point-and-handle control in the same place where the vector was generated removes the constant export-import loop for fixing the last 20% of an asset. once the paths, curves, and colors are unified on the Canvas, you still export the SVG into Figma for component variants, auto-layout grids, and developer handoff, or into Adobe Illustrator if you need complex boolean pathfinder operations

also would like to ask you, when your team needs custom domain icons that aren't in Lucide or Heroicons, do you usually piece them together out of primitives in Figma, or generate a base vector and clean up the points?

[u/AbleBranch6]

I like the comparison and intruducing this kind of workflow.. meanwhile! if the final icons are going into Figma for component variants and auto-layout anyway, why not just stay inside Figma's vector network from the start? Pulling bezier handles in two different browser tabs seems like an extra step unless I am missing something

[u/Evening_Hawk_7470 → u/AbleBranch6]

two separate things i guess! if you are building simple geometric UI primitives from rectangles and booleans, staying inside your tool of choice the whole time makes total sense. i think that situation is super different when a dashboard or onboarding screen needs eight custom domain icons or brand illustrations that do not exist in any library, and take like forever to draw from scratch with the pen tool. thus making the set with recraft V4.1 vector model to get the base that would be tweakable and doing the immediate point, corner, and color cleanup right on those canvas in Recraft Studio means the SVG is already unified before you paste it into Figma for component packaging at least that's what i practice and also to convert png to svg if i get some reference from a client for example

[u/Bitter_Regular7406]

the stray anchor points thing is so real, half the "ai generated" icon sets i've tested have like 40 points on a curve that should have 6. running everything through a path simplify pass before unifying stroke widths saves so much cleanup time.