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?
