SVG Icon Generator
Create and customize SVG icons with 100+ pre-made shapes, color presets, and export to multiple formats. Import SVG, edit paths, export icon packs.
SVG Icon Generator
Create custom SVG icons with 100+ shapes and export as icon packs
Shape Library
Transform & Layers
Canvas Settings
Paint & Export
Click a shape to start drawing
Live Preview (1:1)
Real scale: 64x64px
Shortcuts
What is an SVG Icon Generator?
An SVG icon generator is a visual design tool that lets you create, customize, and export scalable vector icons for web and app projects. SVG icons are resolution-independent, meaning they look crisp on any screen: from small mobile displays to 4K monitors: and are typically much smaller in file size than raster icon images.
CodeHelper's SVG Icon Generator includes more than 100 pre-made shapes, import support for existing SVG files, and export to multiple sizes simultaneously for icon packs. Your drawing is kept in the browser, so it is still there after a reload.
Key Features
- 100+ Shape Library: Basic geometry, arrows, UI controls, files and media, weather, social, burger menus and status badges, ready to customize instantly.
- Import SVG: Upload an existing SVG file and edit its paths directly in the tool.
- Export Icon Pack: Download your icon in multiple sizes (16px to 512px) for favicons, app icons, and UI kits.
- Alignment Tools: Center horizontally/vertically, send to front/back, snap to grid.
- Color Presets: Quickly apply common UI color schemes and save recent colors.
How to create a custom SVG icon
- Pick a base shape from the library or import an existing SVG.
- Adjust fill color, stroke width, and stroke color, or outline a filled shape with both.
- Drag and resize the shape on the canvas.
- Use alignment tools to center and position precisely.
- Export as SVG or PNG in the sizes you need.
Whether you are creating favicons, building a UI icon library, or designing custom icons for an app, this free SVG icon maker delivers professional results in minutes.
Looking for a ready made set instead? The icon libraries directory compares Lucide, Material Design Icons and the rest on license, icon count and whether attribution is required.
Frequently Asked Questions
How do I make a favicon or app icon pack from my SVG?
Draw or import the icon, then click Export icon pack. Tick the sizes you need (16 and 32 px for favicons, 180 px for Apple touch icons, 192 and 512 px for a web app manifest) and download the ZIP. It contains one PNG per size plus the source SVG, all rasterized from the same vector.
Can I combine several shapes into one icon?
Yes. Every click on the library adds a shape on top of the canvas. Select a shape to move it with the mouse or the arrow keys, scale and rotate it, send it to the back or bring it to the front, and give each one its own fill and stroke. The export writes all shapes into a single clean SVG.
Can I import my own SVG and edit it?
Yes. Import SVG loads the file as one group scaled to the current viewBox. You can move, scale, rotate and recolor it, add library shapes around it and export the result. Very complex files with filters, masks or embedded images keep their markup but those effects are not editable here.
Why do the shapes snap to a grid?
Icons look crisp when their edges land on whole pixels at the sizes they are displayed. Snapping to 1, 2, 4 or 8 units of the viewBox keeps coordinates aligned, so a 24 px or 32 px icon stays sharp instead of blurry. Set snap to 1 px for free placement.
Is my drawing saved if I close the page?
Yes. The canvas and your settings (viewBox, colors, stroke, grid) are stored in your browser with localStorage, so the icon is still there when you come back. Nothing is uploaded: rendering, PNG export and the ZIP are produced entirely on your device.
Related
Free forever, no ads, no tracking. Support the project