Icon maker: a complete puffy icon set in one exact style

A full SVG icon set for your site in one soft, puffy, one-color style, written as a single React components/icons.tsx file.

You'll attach

Needs file

Works with

CursorClaudeChatGPTv0Claude Code

How to use it

1. Open Cursor or claude.ai (or another AI listed here).
2. Attach the file (PDF, Word, CSV or Excel), or paste its text into the prompt.
3. Fill in the highlighted blank ([LIST THE ICONS YOU NEED]) below, or edit them after pasting.
4. Copy the prompt, paste it into the chat and send.
5. Attaching your project files is optional. If you skip the icon list, the AI uses them to find every place that needs an icon.

I want a complete icon set for my site, drawn in one exact style. Match it precisely.

Icons I need:
[LIST THE ICONS YOU NEED]
(for example: home, search, settings, user, bell, heart, cart, trash, edit, share, download, calendar)
If I didn't list any, look through my project, find every place that needs an icon, and draw a set that covers all of them.

THE STYLE
- Puffy and round, like soft pillows. No sharp points or hard corners anywhere: star tips, arrow heads, bolt points and a heart's bottom are all small curves.
- Solid. Closed shapes are filled.
- Light, never chunky. Open glyphs (check, plus, x, chevrons, rings, lines) are thin 1.6px strokes.
- One color only, currentColor. No gradients, no opacity, no second color.
- Simple. One or two forms per icon. If a detail disappears at 14px, leave it out.
- Same 18x18 grid for every icon, about 2.5px of room to the edges, centered optically, so the set looks even side by side.

HOW TO BUILD THEM
Put every icon in one file, components/icons.tsx, starting from exactly this base. The two stroke settings are what create the style:

```tsx
import type { SVGProps } from "react";

type IconProps = Omit<SVGProps<SVGSVGElement>, "children"> & { size?: number };

function Icon({ size = 18, children, ...props }: IconProps & { children: React.ReactNode }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="currentColor" aria-hidden {...props}>
      {children}
    </svg>
  );
}

// Thin round stroke for open glyphs.
const line = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" } as const;

// Trace every filled shape with this. It puffs the shape out a little and rounds all of its corners.
const puff = { stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round" } as const;
```

Three icons from the set, so you can match the weight and feel exactly:

```tsx
export const HeartIcon = (p: IconProps) => (
  <Icon {...p}>
    <path {...puff} d="M9 14.3c-.3 0-.6-.1-.86-.27C5.2 12.1 3.2 10 3.2 7.35A2.95 2.95 0 019 6.05a2.95 2.95 0 015.8 1.3c0 2.65-2 4.75-4.94 6.68-.26.17-.56.27-.86.27z" />
  </Icon>
);

export const CheckIcon = (p: IconProps) => (
  <Icon {...p}>
    <path {...line} d="M4.4 9.6l3 3 6.2-6.4" />
  </Icon>
);

export const SearchIcon = (p: IconProps) => (
  <Icon {...p}>
    <circle {...line} strokeWidth={1.7} cx="8" cy="8" r="4.8" />
    <path {...line} strokeWidth={1.9} d="M11.6 11.6l2.8 2.8" />
  </Icon>
);
```

RULES FOR EVERY ICON
- Filled shapes get {...puff}. Open shapes get {...line}.
- Paths, circles and rects only. No transforms, masks or clip paths.
- Export each one as [Name]Icon, like SettingsIcon or CartIcon.
- Size comes from the size prop or a CSS class, color from the text color.
- Before you finish, compare every icon against the three examples. If one looks heavier, sharper or busier, redraw it.

Return the complete components/icons.tsx, then a one-line list of every icon you drew.