Simple SVG graphics you can paste into a page
SVG is the vector image format of the web. An SVG is plain XML text describing shapes, so it stays sharp at any size, weighs a few hundred bytes, can be styled with CSS and can be pasted straight into HTML. That makes it ideal for icons, badges, dividers and decorative marks.
This creator builds small, original SVG snippets from a few controlled options: a shape, a colour, a background and a stroke width, plus a label that is written into the file for screen readers. Copy the code and use it in a page or a prototype.
How to use it
- Choose a shape: badge, wave, spark, ring, diamond or pill.
- Pick the colour, the background and the stroke width.
- Type a short label describing the graphic; it becomes the accessible name.
- Copy the SVG code and paste it into your HTML, or save it as a .svg file.
Example: a ring mark
Shape: ring, colour #0d9488, label: Logo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" role="img" aria-label="Logo">
role="img" with an aria-label tells screen readers to announce the graphic as one image called Logo, instead of reading out its shapes.
Inline SVG or an image file
Pasting the SVG code directly into HTML lets CSS change its colours, for example on hover or in dark mode, and saves a network request. Saving it as a file and using <img src="mark.svg" alt="…"> keeps the HTML tidy and lets browsers cache it. Both are fine for small graphics.
The viewBox attribute defines the drawing's own coordinate system. Change the width or height in CSS and the drawing scales without distortion.
Accessible graphics
A graphic that carries meaning needs a text alternative. For inline SVG, role="img" and aria-label do that job, which is why the label field matters. A purely decorative graphic should instead be hidden from assistive technology with aria-hidden="true", so screen-reader users are not interrupted by it.
Keep it original and safe
These shapes are deliberately abstract. Do not use them to imitate another company's logo or trademark. When you take SVG from other sources, remember that SVG can contain scripts: only paste SVG you trust, and run files from users through a sanitiser such as DOMPurify before showing them. The code generated here contains no scripts or external references.
Questions
Can I edit the SVG further?
Yes. Open it in any text editor, or in vector tools such as Inkscape, Figma or Illustrator.
Can I use the result commercially?
Yes. The shapes are generic geometry generated on your device.
Is anything uploaded?
No. The SVG is generated in your browser.