your icons, your hand.

Most websites borrow their icons from the same few icon sets, which is why so many sites look alike. Every icon on your copy of unparty-app is drawn instead: a few pen strokes, slightly uneven, the same hand that circles the 404 page. They live in one folder you own. Redraw an arrow, add an icon for your own product, and every page that uses it changes with it.

(An icon here is a tiny drawing written as text: a list of pen moves on a 24 by 24 grid. You can read it, edit it, and keep its history like any other file.)

🧭 How Your Icons Work

One folder — every icon lives in src/app/components/icons/, grouped by family: Marks, Actions, Things, People, Momentum, Status, Media, Git
One frame — each icon is a few pen strokes inside HandDrawnIcon, which handles the grid, the round pen ends, and the size
Your colors — an icon draws in the color of the text around it, so it fits wherever it sits. Add themed and it draws in your theme color instead, like the arrows that move between pages
Readable when small — most icons show at 12 to 16 pixels, so small icons get a heavier pen line on their own, and big ones keep a fine one

this is a work in progress

Draw.
A few pen strokes on a 24 by 24 grid.
Swap.
Change one import.
Check.
Look at it small, next to the old one.

Draw.
A few pen strokes on a 24 by 24 grid.

Success.an icon only your site has.

1️⃣ Draw an Icon

Open the family file your icon belongs in and copy an icon that is close to what you want. Each one is a name and a few paths. A path is a pen stroke: M puts the pen down at a point, and the curves after it move the pen. This is the whole X:

tsx

export function X(props: HandDrawnIconProps) {
  return (
    <HandDrawnIcon {...props}>
      <path d="M6.3 5.9c3.8 4 7.5 8 11.6 12.4" />
      <path d="M18 5.7c-4.4 3.9-8.2 8-12.2 12.7" />
    </HandDrawnIcon>
  );
}

Stay inside the grid — keep strokes between about 2 and 22, so nothing gets cut off
Use few strokes — two or three for a small icon. Detail disappears at 12 pixels
Let lines bow — a stroke that curves slightly reads as a pen; a perfectly straight one reads as a computer
Overshoot — a loop that runs a little past where it started looks drawn. The shared LOOP shape in shapes.ts does this, and the circled icons reuse it
Mirror instead of redrawing — a left arrow is the right arrow flipped, so one drawing serves both

2️⃣ Swap It In

Export your icon from index.ts in the icons folder, then import it where you want it. It takes the same settings as every other icon:

tsx

import { X } from '@/app/components/icons';

<X size={16} />                 // the text color around it
<X size={16} themed />          // your theme color
<X className="h-4 w-4" color="#fff" />  // any color you choose

Redrawing an icon that already exists needs no swap at all. Change its paths, and every page that uses it updates.

3️⃣ Check It Small

An icon that looks great big can turn into a smudge at the size it actually shows. Before you keep it, look at it the way your visitors will:

Open a page that uses it and look at it at its real size, not zoomed in
Look at it at 12 and 16 pixels if it is a small icon, and at 24 if it is a button you tap
If it blurs small, take strokes away rather than adding detail
If it sits on a photo, put it on the same frosted glass the header uses, so it reads over light and dark pictures alike

“A good icon reads before anyone looks at it.”
— unparty-app

🤖 Draw It With Claude

Every icon on this site was drawn this way, with Claude in the codebase: draw, compare next to the old icon at four sizes, swap it in everywhere it is used, then check the real pages before and after. Ask for the same loop:

prompt

Draw a hand-drawn icon of [a coffee cup] for my site. Use the
HandDrawnIcon frame in src/app/components/icons, match the pen
style of the other icons, and add it to the right family file.

Show my new icon next to the one it replaces at 12, 16, 24 and
32 pixels, so I can see whether it still reads when it is small.

Swap [Bell] for my new icon everywhere it is used. Keep each
place's color and size, then show me the pages before and after.

This icon blurs at 12 pixels. Redraw it with fewer strokes.

✅ You Are Done When

You have drawn or redrawn at least one icon in src/app/components/icons/
It shows on a real page at the size it is used, and still reads
It keeps the color of where it sits, or uses your theme color on purpose

Icons are small, and they are on every page. Making them yours is one of the quickest ways to make the whole site feel like no one else's. Next, make it yours: replace every remaining unparty reference until the count reaches zero.

“Draw the small things yourself.”
— unparty-app