Brief a small icon set and check the family
Someone asks for “three icons for the new toolbar, in our teal”. Icons can share a colour and still look unrelated, so brief their geometry, weight and meaning as one system.
Example output
A small editable icon family
Example icons with one shared stroke and three different silhouettes.
Read the prompt
Create a small icon-family brief for [named concepts] at [display size].
Use one canvas/grid, [stroke or filled] construction, consistent weight,
corner treatment and [palette]. State each icon's meaning and distinctive
shape. Avoid unreadable tiny detail, text inside icons and copied logos.
Specify the actual deliverable: [editable SVG paths / raster images].
Return a pilot set/source and explain any ambiguity before expanding it.What you'll make
a short icon-family brief and a pilot set of three icons with clear meanings, one construction system and editable files.
What you'll need
the concepts the icons stand for, the size they will appear at (often 16, 24 or 48 px), any brand colours and about 20 minutes. Check your existing icon library first, or an open set such as Material Symbols or Lucide; a new generation is not always needed.
1. Write the system and the meanings together
Specify one canvas, stroke or filled style, line weight, corner treatment and palette, then give each icon a meaning and a distinctive shape. “Modern teal icons” can produce attractive but incompatible shapes with different weights and little to tell them apart.
Start with a small pilot of three or four icons with different silhouettes. If three meanings look identical at the destination size, the problem is the concepts as well as the style.
Write a brief for a small icon family: [named concepts], shown at [display size].
Use one square grid, [stroke or filled] construction, one line weight, one corner
radius and [palette]. For each icon, state its meaning and the shape that makes it
different from the others. No text inside icons, no copied logos and no detail
too small to read at the display size. Flag any concept that is hard to show
before drawing anything.[named concepts] is the list of actions or objects, such as “search, compare, export”. [display size] is the pixel size people will see. [stroke or filled] is your house style. [palette] is one or two colours by name or hex code.
Why this works: the model gets the rules that make icons a family (grid, weight, corners) and the job each icon must do, instead of a mood.
What you should see: a brief with a short rule block and one line per icon, plus any concepts the model thinks are ambiguous.
2. Ask for editable SVG, not a picture of icons
Choose the route by what you need to hand over.
- Image generators (ChatGPT Images, Gemini, Copilot, Canva) return pixel images. They are fine for an illustration, but you can’t recolour or resize their shapes cleanly.
- For editable icons, ask Claude or ChatGPT to write the icons as SVG code, or draw them in a vector tool such as Figma or Illustrator.
A pixel image that looks vector-like is still a pixel image. Renaming a PNG to .svg, or wrapping it in an SVG file, does not make its shapes editable.
Using the brief, write each icon as a separate SVG file on a 24 × 24 viewBox.
Use only paths, lines and simple shapes with stroke="currentColor", the agreed
stroke width and round joins. No embedded images, no text and no filters.
Show the three icons side by side at 24 px with their meaning labels.Why this works: currentColor lets the icons take their colour from wherever they are placed, and banning embedded images stops the model wrapping a picture in an SVG file.
What you should see: three short blocks of SVG code and a preview. Open one file in a text editor: it should contain <path> or <line> elements and no <image> or data:image/png.
3. Check the family at real size
Open the files together at the size people will see them. Compare stroke weight, silhouette, corner radius, fill and optical balance. Then cover the labels and check you can still tell the icons apart without remembering their order.
Keep a text label or an accessible name wherever the meaning matters. A tidy family is not proof that people understand every symbol.
Why this works: most faults only show at the destination size, and side by side; a single icon at 400 % looks fine.
What you should see: three icons that read as one set, each with a different outline at 24 px.
Check the result
- Every file is vector: paths or shapes only, no embedded pixel image.
- Stroke weight and corner radius match across the set at 24 px.
- Each icon has a different silhouette and still makes sense with the label covered.
- Nothing inside an icon disappears or turns to mush at the smallest size.
The usual failure: one icon drifts from the system. It has a heavier stroke, or fine interior detail that vanishes at 24 px, and the shared colour hides it until you view the set side by side at real size.
Icon [name] doesn't match the agreed system: [what differs, e.g. stroke is
heavier than the others]. Redraw only that icon using the shared grid, stroke
width and corner radius. Keep the other icons unchanged. Return the revised
SVG and a side-by-side preview at 24 px with meaning labels.[name] is the icon that drifted; describe the difference in plain words.
Worked example: search, compare and export
Fictional example. A team needs three toolbar icons for an expenses dashboard.
Concepts: search, compare, export
Display size: 24 px
Construction: stroke, 2 px on a 24 × 24 grid, round joins
Palette: teal #0F766EThe first pilot from step 2 came back like this:
| Icon | Shape | Problem at 24 px |
|---|---|---|
| Search | Magnifier | None |
| Compare | Two side-by-side panels | Fine ruled lines inside each panel merge into a grey smudge |
| Export | Arrow leaving a box | Stroke is noticeably heavier than the other two |
The repair prompt went in twice, once per icon: “Icon export doesn’t match the agreed system: stroke is heavier than the others” and “Icon compare doesn’t match: interior lines too fine to read at 24 px”. The second pilot used one 2 px stroke throughout, and the compare panels lost their inner lines.
- The silhouettes did the work. Magnifier, paired panels and outward arrow stay distinct with the labels covered, so no concept needed rethinking.
- The drift only showed side by side. Each icon looked fine alone; the heavier export stroke was obvious next to the others.
- One fix per prompt. Naming one icon and one difference kept the accepted icons unchanged.
Try it
Inspect a family beyond its colour
Define common geometry, distinctive meanings and correct export expectations.
Define stroke, corner and detail rules. A shared colour alone does not make icons a family.
The example in text
- Search: magnifier
- Compare: paired panels
- Export: outward arrow
Example icons.
Task kit for this job: Download (ZIP) · Reusable instructions
Go deeper
Balance by eye, not only by numbers
Two icons can share a canvas and a stroke width while one still looks heavier: a filled circle reads bigger than a thin square of the same size. Compare the set at the intended size and ask for a specific correction, such as “shrink the magnifier lens by 1 unit so it matches the visual weight of the panels”, rather than regenerating the family.
Use labels for unfamiliar concepts
If a symbol’s meaning is unclear, keep a readable label or choose a clearer concept. AI can’t tell you whether people will understand an icon from how it looks; only showing it to the people who will use it can. A five-minute check with three colleagues (“what would you expect this button to do?”) catches most surprises.
Scale only after the pilot works
Keep the brief and the accepted pilot icons as the reference for every later batch. Add new meanings a few at a time, then compare the growing set for repeats and drift. A larger batch does not inherit the pilot’s quality automatically.
Here is our icon brief and three accepted icons as SVG. Draw [new concepts]
to the same rules. Before drawing, tell me if any new concept would look
too similar to an existing icon.[new concepts] is the next few meanings you need.