- Select a Shape Tool — Choose from 8 tools: Select (↖), Rectangle (▬), Circle (●), Ellipse (⬭), Line (╱), Polygon (⬡), Star (★), or Text (T). Click and drag on the canvas to draw the shape.
- Style Your Shapes — Use the right panel to set Fill color (or 'none' for transparent), Stroke color, Stroke Width (0–12px), Opacity (0.1–1.0), Rounded corners (0–50px), and Rotation (0–360°). Changes apply to the selected shape.
- Manage Layers — Each shape appears in the Layers panel. Click to select, use ↑/↓ to reorder. Duplicate or delete shapes with the toolbar buttons.
- Canvas Settings — Adjust canvas Width and Height (64–1024px). Set background color or make it transparent. Enable Grid overlay and Snap-to-grid for precise alignment.
- Export — Download as SVG (vector, scalable) or PNG (raster). Copy the raw SVG code to clipboard for direct use in HTML.
SVG Editor & Icon Maker — Create Vector Icons in Your Browser
The SVG Editor & Icon Maker is a free, browser-based vector drawing tool for creating icons, logos, and simple illustrations. Draw shapes, style them with colors and strokes, arrange layers, and export as SVG or PNG — all without installing any software.
Vector graphics (SVG) are essential for modern web development. They scale to any size without loss of quality, have tiny file sizes, and can be styled with CSS. This tool makes creating them accessible to everyone.
Key Features
- 8 Drawing Tools — Rectangle, Circle, Ellipse, Line, Polygon, Star, and Text shapes. Plus a Select tool for choosing and modifying existing shapes.
- Full Styling Control — Fill color (with transparent option), stroke color, stroke width (0–12px), opacity (0.1–1.0), rounded corners (0–50px), and rotation (0–360°).
- Layer Management — Every shape is a layer. Reorder layers with ↑/↓ buttons. Select any layer to edit its properties. Visual selection outline shows the active shape.
- Canvas Configuration — Adjustable width and height from 64 to 1024px. Optional background color or transparent canvas. Grid overlay for alignment. Snap-to-grid for precise positioning.
- Undo System — 30-state undo stack covers all actions: adding, deleting, duplicating, and reordering shapes.
- Shape Duplication — Duplicate any selected shape with a 15px offset for quick pattern creation.
- SVG Export — Download clean, standards-compliant SVG files. No inline styles or unnecessary attributes. Ready for web use.
- PNG Export — Render the canvas to a high-quality PNG image using HTML5 Canvas API.
- Copy SVG Code — Copy raw SVG markup to clipboard for pasting directly into HTML files, React components, or design tools.
- Drag-to-Draw — Intuitive click-and-drag interface. The shape size is determined by your drag distance.
Standard Icon Sizes
- 16×16 — Favicon, tab icon
- 24×24 — Material Design icon standard
- 32×32 — Desktop and toolbar icons
- 48×48 — App drawer icons
- 64×64 — Medium resolution icons
- 128×128 — High resolution web icons
- 256×256 — App store icons
- 512×512 — Full size app icons
Use Cases
- Web Icons — Create custom SVG icons for websites, dashboards, and web applications.
- Logo Design — Build simple vector logos with geometric shapes and text.
- UI Components — Design buttons, badges, and decorative elements for user interfaces.
- Social Media — Create vector graphics for profile pictures, thumbnails, and social media posts.
- Prototyping — Quickly sketch icon ideas and export for use in mockups and wireframes.
- Education — Learn SVG fundamentals by creating shapes and examining the generated SVG code.
Privacy
The SVG Editor processes everything in your browser. No images or data are uploaded. SVG and PNG exports are generated locally using the DOM and Canvas API. The tool works completely offline once loaded.