How to use the SVG Icon Generator.
An SVG icon should be simple, scalable and free of unnecessary scripts or external references. Decide whether it is decorative or meaningful and supply the appropriate accessible label at its point of use.
Make the workflow fit your task.
Define the icon's meaning, viewBox, stroke or fill style and intended size. Produce minimal SVG without unnecessary external references, then inspect it at actual sizes. Decide accessible treatment at the point of use, including the surrounding control's name.
- What you provide
- Simple icon concept and style constraints.
- What you get
- Editable SVG draft with viewBox and accessible labeling.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Completed example
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Should a decorative SVG inside a labeled button be announced separately?
Usually hide the decorative icon from assistive technology and let the button's accessible name communicate the action.
Why does the icon appear clipped when its path coordinates look correct?
Stroke extends beyond path geometry. Check the viewBox, margins and rendered bounds at the intended stroke width.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑