SVG Icon Generator

The SVG Icon Generator makes the simplest kind of geometric icon quickly: choose a shape (circle, square, triangle or hexagon), set the background color, the shape color and the background corner radius, and you get a piece of SVG code that you can copy or download as an icon.svg file. It makes one minimalist style only: a solid-color background with one centered solid-color shape. That suits placeholder icons, rough favicon drafts or simple markers. It can't draw custom paths, add text or icon glyphs, and it isn't a general vector drawing tool.

How to use

1. The live preview sits at the top and updates immediately whenever you change any setting below it.
2. Under 'Shape', click one of the four buttons: Circle, Square, Triangle or Hexagon.
3. Use the 'Background color' and 'Shape color' pickers to choose colors. They're stored as hex values; the defaults are a dark green background (#2F5D50) and a white shape (#FFFFFF).
4. Drag the 'Background corner radius' slider to round the background. It runs from 0 to 100 pixels and shows the current value beside the label.
5. When you're happy, click 'Copy SVG code' to put the code on your clipboard (it shows 'Copied'), or 'Download SVG file' to save it as icon.svg. The read-only text box under the buttons shows the same SVG code live, so you can read it directly.

What the generated code looks like

These examples were produced by running the tool's own generator function. The defaults (circle, background #2F5D50, shape #FFFFFF, radius 24) produce a 200×200 SVG with viewBox 0 0 200 200: first a full-size background rectangle with a corner radius of 24, then a circle of radius 60 at the center (60% of half the canvas, from the code). The square draws a 120-pixel block starting at (40, 40); the triangle's vertices are (100,40), (40,160) and (160,160); and the hexagon's six vertices are (100.0,36.0), (155.4,68.0), (155.4,132.0), (100.0,164.0), (44.6,132.0) and (44.6,68.0). All dimensions are hard-coded: the icon is always 200×200, and the inner shape always takes up about 60% of the canvas. Because of the viewBox, the graphic scales smoothly when you set its width and height with CSS.

Supported range and known limits

• Four shapes only, and only one centered shape at a time. No gradients, strokes, shadows, text, layering of several shapes or custom paths.
• The icon size is fixed at 200×200 with no size setting. For another size, change the width and height in the downloaded file and keep the viewBox so it scales proportionally.
• The corner radius is applied to the whole background rectangle. With the Square shape, the inner block uses the same radius value, so a large radius makes the inner square very round too. The circle, triangle and hexagon aren't affected by the radius. At the maximum of 100, the background becomes a circle.
• Colors can only be chosen with the color pickers. There's no field for typing a hex code or setting transparency, so you can't make a transparent background or a semi-transparent shape.
• A read-only text box under the buttons shows the current SVG source (clicking it selects everything so you can copy by hand). You can also use 'Copy SVG code' or the download. The text box cannot be edited; change the options above instead. The preview is scaled down to 160 pixels to fit its box, while the exported file stays 200×200.
• The downloaded file is always named icon.svg. If you need a PNG, convert the SVG with another tool; this one doesn't rasterize and won't give you the various app icon sizes.
• If the background and shape colors are the same, the shape blends in and disappears, which is expected.
• Settings aren't saved; reloading restores the defaults.

FAQ: What's the difference between SVG and PNG?

SVG describes graphics as code. It's vector-based, stays sharp at any size, is tiny, and can be resized with CSS. PNG is a pixel-based bitmap that blurs when enlarged. SVG suits web icons and simple logos, while cases that require fixed pixel sizes, such as app store icons, need PNG.

FAQ: How do I use the code on a web page?

You can paste the copied SVG code straight into an HTML file, where it becomes an inline graphic, or save the downloaded icon.svg and reference it with <img src="icon.svg">. As a favicon, point a link tag in the head at the file; modern browsers support SVG favicons, although a few older environments don't.

FAQ: Can I use the generated icons commercially?

The tool only draws basic geometric shapes in colors you choose, and no third-party artwork is involved. Whether it works as a trademark or brand mark is for you to judge, since extremely simple geometric shapes are easily confused with other people's icons.

FAQ: The triangle doesn't look centered.

The triangle's apex and base sit within the 20% to 80% range of the canvas, so its bounding box is centered, but a triangle's visual center of mass is lower than its geometric center, so it appears to sit slightly low. For more precise optical centering, download it and adjust the numbers in 'points' by hand.

Privacy and processing

The SVG code is assembled in your browser from your choices and isn't sent to any server. The download uses a temporary file created locally in the browser, and 'Copy' just writes the code to the clipboard. The tool makes no network requests and doesn't save your design.