SVG Icon Generator
Pick an icon from a clean 24×24 stroke icon set and get it in the format your project uses: inline SVG, a standalone file, a sprite with <symbol> and <use>, a CSS mask that follows the text colour, a background data URI, or a React or Vue component. Set size, stroke width and colour, and choose whether the icon is decorative or carries meaning, so the markup is accessible either way.
- Runs in your browser
- No sign-up
- Free to use
How to use SVG Icon Generator
- Choose an icon from the grid.
- Pick the output format.
- Set size, stroke width and colour.
- Mark it decorative or meaningful, then copy the code.
SVG Icon Generator features
65 icons
A consistent 24×24 stroke set with round caps and joins.
Seven formats
Inline, file, sprite, CSS mask, data URI, React, Vue.
currentColor
Icons follow the surrounding text colour.
Accessible
aria-hidden for decorative icons, role="img" and title for meaningful ones.
Adjustable
Size and stroke width.
Preview
At three sizes and inside a button.
When to use SVG Icon Generator
- Adding icons to buttons and navigation.
- Building an SVG sprite for a website.
- Creating icon components for React or Vue.
- Using icons in CSS without extra HTML.
SVG Icon Generator FAQ
Decorative or meaningful?
An icon next to visible text, such as a download arrow before “Download”, is decorative and should be hidden from screen readers. An icon on its own, such as a search button without text, carries meaning and needs a label.
Which format should I use?
Inline SVG is simplest and fully stylable. Sprites send each icon once for pages with many repeats. CSS masks keep HTML clean and follow the text colour. Components fit React and Vue projects.
Why does currentColor turn black in some formats?
A separate SVG file or a background image cannot see the page’s text colour. Use inline SVG, a sprite or the CSS mask to inherit it.
Can I change the stroke width later?
Yes. Inline and sprite icons use the stroke-width attribute, and the React component has a strokeWidth prop.
Can I use these icons commercially?
Yes, the generated code is yours to use in any project.
Is anything uploaded?
No. The code is generated in your browser.
Using SVG icons well
SVG has replaced icon fonts as the best way to show icons on the web. SVG icons are sharp at every size, can be coloured with CSS, load without a font file and, unlike icon fonts, do not turn into random characters when a font fails to load or is overridden by a user’s font settings.
The icons in this generator are drawn on a 24×24 grid with a 2-pixel stroke, round line caps and joins, and no fill, which gives them a light, consistent look. Because the stroke uses currentColor, an inline icon automatically takes the colour of the text around it, including hover and focus states.
Accessibility depends on context. Decorative icons get aria-hidden="true" and focusable="false", so screen readers skip them and older browsers do not add them to the tab order. Meaningful icons get role="img" and a <title> referenced by aria-labelledby, which gives them an accessible name.
The output formats cover different architectures. A sprite defines each icon once as a <symbol> and reuses it with <use>, which saves bytes when the same icon appears many times. The CSS mask technique uses the icon as a stencil over a currentColor background, so a single class shows a coloured icon. Data URIs embed the icon in CSS when a fixed colour is fine.
For component frameworks the generator writes a React function component and a Vue single-file component with size and title props, which switch the icon between decorative and labelled automatically.