From an AI prompt to an SVG icon in React: a tested example

PunkerDuck — Mon, 12 Oct 2026 15:12:00 +0000

An SVG export can contain real vector paths and still be a poor fit for a tiny button. This example follows one image from its AI prompt through conversion to a React label, then looks at what survives at interface sizes.

Disclosure: We build PunkerIcon, which produced the assets used in this experiment. AI assistance was used to draft this article; the SVG measurements and React example were checked against the actual files.

1. Start with the prompt and inspect the output

We used this description:

Rubber duck wearing coding glasses with laptop

The settings were Icon artwork, color enabled and pixel art off. Here is the exported SVG rendered as a PNG at 1024 × 1024 pixels:

The exported SVG contains solid yellow, orange and gray shapes with dark contours. Vector conversion can simplify shading and change edge shapes. Both exports have transparent backgrounds; the React example below supplies white behind the dark contours.

You can download the complete SVG and PNG export.

2. Check what the SVG contains

This file is 13,152 bytes, with 16 paths and five explicit fill colors:

#040404  #ababac  #f46d14  #fccb13  #fcfcfc

There is no embedded <image> element. It contains vector geometry rather than a PNG wrapped in an SVG container.

Its outer structure looks like this. The path data is omitted here; use the downloaded file for the working asset.

<svg xmlns="http://www.w3.org/2000/svg"
  width="512px" height="512px"
  viewBox="0 0 1254.000000 1254.000000">
  <g transform="translate(0.000000,1254.000000) scale(0.100000,-0.100000)">
    <!-- All 16 filled paths belong here. -->
  </g>
</svg>

Keep the viewBox and group transform intact. The paths use a larger coordinate scale with an inverted vertical axis. Changing the viewBox to 0 0 24 24 crops the drawing; it does not resize it to 24 pixels. Set the displayed width and height instead.

The dark contours are filled shapes, not adjustable strokes. Adding strokeWidth will not turn them into thinner outlines.

3. Use the file in React

In a Next.js project, save the complete SVG as:

public/images/blog/developer-duck-worked-example.svg

It will be served at /images/blog/developer-duck-worked-example.svg. Other React setups can use the same component as long as your public asset folder serves that URL.

This is the component rendered in the worked example. It needs no SVG loader or extra library:

export function DeveloperProjectLabel() {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        backgroundColor: "#fff",
        color: "#111827",
        padding: "8px 12px",
        borderRadius: 8,
      }}
    >
      <img
        src="/images/blog/developer-duck-worked-example.svg"
        width={32}
        height={32}
        alt=""
      />
      Developer project
    </span>
  );
}

The empty alt makes the image decorative because the adjacent text names the project. If the image conveys information that the text does not, give it an appropriate description instead. Explicit dimensions reserve its space in the layout.

The white background and dark text keep this particular label readable across themes. Its artwork palette stays fixed: changing the parent’s text color does not recolor the SVG loaded through <img>. An external image does not inherit the page’s currentColor into its paths. For path-level styling, you would need an inline SVG and suitable fill values.

4. Test the size you actually need

This PNG comparison is rendered directly from the exported SVG at three times resolution. The labels show the intended display sizes at 1× scale: 24, 32, 64 and 128 pixels. DEV resizes the inline preview, preserving the relative sizes; use the full-resolution link below for a sharper view.

Open the full-resolution comparison (1920 × 690).

At the smaller sizes, the yellow duck and dark glasses remain recognizable, but the eyes and laptop details are harder to distinguish. At 64 and 128 pixels, those details have more room.

Vector scaling keeps shapes sharp. It cannot make a detailed illustration as legible as a simple interface symbol. This duck is a better fit for a larger avatar or project illustration; keep accompanying text when using it in compact controls. Check it on your actual background, too.

To repeat the size check locally, change both width and height in the component to 24, 64 or 128. Leave the source file unchanged. Compare whether the laptop remains understandable, whether the contours blend together and whether the image still supports the label at normal viewing distance.

The useful check is the rendered result in its intended context. A valid SVG and a small path count tell you about the file’s structure; they do not establish that its details work at every display size.

DEV Community: PunkerDuck

From an AI prompt to an SVG icon in React: a tested example

1. Start with the prompt and inspect the output

2. Check what the SVG contains

3. Use the file in React

4. Test the size you actually need