How to Use AI-Generated SVG Icons in React

Start with a reviewed SVG file

Generate an icon in Studio or choose one from Discover, then download its SVG. PunkerIcon first generates raster artwork. For solid and outline icons, it converts that artwork into vector paths; pixel mode builds vector shapes from a normalized pixel grid. The export is a starting asset to inspect, rather than a ready-made React component.

Open the file in a text editor and a browser. Keep its viewBox and any group transforms: traced paths can use a different coordinate scale from the displayed width. Follow our SVG inspection checklist before importing a file you have not reviewed.

Option 1: use the SVG as an image

For a static icon, save the reviewed file as public/icons/project.svg in a Next.js app. Other React setups can serve it from their public asset directory. No SVG loader is needed for this approach.

export function ProjectLabel() {
  return (
    <span className="project-label">
      <img src="/icons/project.svg" width={24} height={24} alt="" />
      Project
    </span>
  );
}

The empty alt makes the image decorative because the adjacent text already names the project. If the image conveys information without accompanying text, give it a meaningful description. Explicit dimensions reserve space while it loads.

An SVG loaded through an image element retains its own fills. Setting color on the surrounding React element will not recolor its internal paths. Use this approach when you want to preserve the original palette.

Option 2: convert reviewed markup into a component

Use an inline component when the icon needs to inherit a text color or respond to props. Copy the SVG elements into JSX, remove XML declarations and document types, and change attributes such as class, stroke-width and fill-rule to className, strokeWidth and fillRule. Here is a small hand-written example of the component structure:

import type { SVGProps } from "react";

// Hand-written example, not a generated PunkerIcon export.
export function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} viewBox="0 0 24 24" width="1em" height="1em"
      fill="none" stroke="currentColor" strokeWidth={2}
      strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true" focusable="false">
      <path d="m5 12 4 4 10-10" />
    </svg>
  );
}

// The button text supplies its accessible name.
<button type="button"><CheckIcon /> Save</button>

For a monochrome PunkerIcon export, you will often need fill="currentColor" on the existing group or paths, rather than the example's stroke-based styling. A traced outline is usually a filled contour: changing strokeWidth does not change the thickness of that contour. Keep color fills on multicolor artwork unless you intentionally want a single-color version.

Keep inline SVG as reviewed JSX. Do not insert arbitrary downloaded or user-supplied SVG strings with dangerouslySetInnerHTML. If a file has gradients, masks or clip paths, make their IDs unique when rendering multiple copies.

Check it inside the actual interface

• Render at the intended size, including 16, 24 or 32 pixels if used in compact controls. Vector scaling preserves geometry, but small details can still disappear.
• Test light and dark backgrounds. A black icon may need an intentional color change to remain visible.
• Give an icon-only button an accessible name, such as aria-label="Save project". Decorative artwork should not duplicate that name.
• Compare spacing and visual weight with neighboring icons. Reusing a prompt helps direct the style, but generated outputs still need review.

For prompt and export basics, see How to Generate SVG Icons with AI. Reference: React's DOM and SVG component documentation and MDN's viewBox explanation.