Icon Editor

About This Tool

This tool provides an online vector icon editor focused on creating and refining scalable SVG icons for UI kits, design systems, and frontend development. Target users include product designers, front-end engineers, branding teams, and SVG librarians who need consistent iconography across apps. The problem solved is translating design intent into clean, reusable vector assets without manual SVG coding. Use cases include new icon creation, style standardization, and rapid iteration of symbol families.
The tool operates on vector primitives and a fixed 512x512 export canvas. Required features: (1) central subject generation or import of base shapes; (2) parameterization of fill colors, stroke widths, and simple transformations (rotation, scale); (3) enforcement of subject coverage: the primary shapes must occupy at least 70% of the canvas; (4) SVG export with a standard header, title/desc metadata, and clean path data. Optional/advanced features: presets, alignment checks with auto-adjustment, grouping for modular edits, and export of alternate viewports. The tool emphasizes non-destructive editing and deterministic output to support design tokens and component libraries. Example workflow: specify a yellow pencil body, a gray tip, a pink eraser, rotate to -20 degrees, verify coverage, export as 512x512 SVG. Unique differentiators include strict export sizing, a coverage constraint to prevent small icons from appearing lost at small scales, and a parameter-driven approach that minimizes manual path editing.
The tool takes these inputs: canvas_size fixed at 512, base_shape (enum), fill_color hex, stroke_color hex, rotation_deg, scale_factor, export_flags; Outputs: svg_string with 512x512, fill attributes, and metadata tags (title/desc).
The engine applies a geometric transform matrix combining rotation and scale to shape primitives, computes the bounding box to assess coverage, and adjusts layout if necessary. It exports a single SVG document with group transformations preserved. If color values are invalid, defaults apply; if coverage constraint cannot be met due to extreme inputs, the tool applies a compensating scale or centers the subject; if inputs are missing, defaults are used. External data is not required. Uses px units, UTF-8, standard SVG conventions; no currency or locale-specific rules beyond color naming and hex. Assumes vector-friendly workflows; does not ingest bitmap assets, lacks raster export, and does not provide UI.

Sign in to see all your usage