One Grid, Eighteen Icons
A whole icon set on one page — eighteen flat marks in a grid, sorted into three bands so the set holds together at the level of meaning, not just line weight. Six fields.
Two runs of the same template. A vibe library beside a campus study-planning app — the same three bands, and in both the ideas row is unfilled, because the row that has to invent form is the row that proves a product has a vocabulary.
Generated from this template with the fields shown above — the three bands land as bands: six objects in indigo, six actions each showing a hand mid-doing, and six ideas built from pure form with no fill at all. The ideas row is the one worth looking at, because it is the row the reference could not produce: given the same kind of brief, its own baseline turned every action and every abstraction into a photographable object and returned two nearly identical calendars, eighteen things and no vocabulary. Run-to-run quirks: which hand gesture stands for copy versus paste can swap, and momentum and easing come back close enough to argue about — which is the sheet doing its job.
Generated for this library
Input
Subject Vibary - designing interfaces by describing them
Objects laptop · key · terminal · swatch · stopwatch · plane
Actions describe · scrub · copy · paste · publish · undo
Ideas motion · easing · version · draft · taste · momentum
Colour objects indigo · actions ochre · ideas unfilled
Returned 1 sheet · 3:4 · 3 columns x 6 rows · white ground
band 1 the six objects, rows one and two, indigo fills inside
one black contour - the easiest six, drawn plainly
band 2 the six actions, rows three and four, ochre fills - each
one a hand or an arrow doing the verb, never a noun
standing in for it
band 3 the six ideas, rows five and six, no fill at all - the
hardest six, and the unfilled row is where a set either
proves it has a vocabulary or admits it does not
line one contour weight across all eighteen, rounded ends
size one optical size, one visual weight, even gutters
verdict easing and momentum came back nearly identical, which is
the set telling you they are one idea, not twoYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The subject
- 2Objects — things you could photograph
- 3Actions — things someone does
- 4Ideas — things with no body
- 5The line and the fills
- 6The colour budget
One Grid, Eighteen Icons
Produce ONE image: a whole icon set on one sheet. Follow every line below. Replace only the FIELDS block; everything after it is fixed.
First — do you have the fields?
If any field below still has braces around it, stop and ask. Put all the questions in one short message, and show the example under each one so they can see the shape of a useful answer. Wait for the replies, then draw. Never fill a brace yourself: a value you invented is a value nobody asked for, and it will look exactly as considered as the ones they did give you.
Ask in whatever language they are writing to you in. Translate the questions and the examples; do not make someone read English to tell you what they want.
The examples are only examples. If someone answers a question, use their answer; never fall back to the example because you prefer it.
If the fields are already filled in, ignore this and carry on.
Fields — replace these six lines only
- The subject: {what the product or service is} e.g. Vibary — designing and shipping interfaces by describing them
- Objects — things you could photograph: {six} e.g. a laptop, a keyboard key, a terminal window, a colour swatch, a stopwatch, a paper plane
- Actions — things someone does: {six} e.g. describe it, scrub a timeline, copy code, paste it in, publish, undo
- Ideas — things with no body: {six} e.g. motion, easing, a version, a draft, taste, momentum
- The line and the fills: {one stroke weight, and how fills work} e.g. one heavy black contour on every icon, flat fills inside, rounded ends, no hairlines
- The colour budget: {which band carries which colour} e.g. objects in #5B5BD6 indigo · actions in #E8C468 ochre · ideas unfilled, black on white
The band law
This is what the sheet is for, and it is the part every icon set gets wrong quietly.
Eighteen icons fail as a set when they are drawn at three different levels of abstraction and arranged as though they were one. A book, a *studying*, and a *goal* are not siblings: the first is a thing, the second is a verb wearing a thing's clothes, and the third is a metaphor. Mixed at random across a grid, the set reads as a pile.
So the grid is banded, top to bottom:
- Objects — things with a physical form. The easy six. Draw them plainly; a laptop is a laptop.
- Actions — things someone does. Each must show the doing: a hand, an arrow, a state changing. A noun standing in for a verb is the failure here — a document icon for "publish" is an object drawn in the actions band, and it will read as a duplicate of something upstairs.
- Ideas — things with no body at all. The hard six. These are built from pure form: a curve, a stack, a divergence, a weight. They may not borrow an object as a crutch.
Rows one and two hold the objects, three and four the actions, five and six the ideas. No labels on the sheet — the banding is spatial, not written.
The sheet
- Vertical 3:4. Pure white ground, painted, never transparent. No title, no captions, no frames, no shadows, no background pattern.
- Three columns, six rows, eighteen cells. Even gutters, generous margins, the whole thing breathing.
- Every icon centred in its cell at one optical size — not one bounding box. A wide icon and a tall one should feel the same weight on the page.
The drawing
- One contour weight on all eighteen, exactly as the fields describe it. Rounded ends, slightly softened corners, confident rather than mechanical. There is no second weight anywhere: an icon with hairline interior detail has left the family.
- Flat fills inside the contour, one or two per icon at most. Every fill is fully enclosed by the black line.
- Big shapes, few details. An icon that needs small marks to be understood is too complex for this size.
The colour budget
Colour is spent per band, not per icon — that is what keeps eighteen marks from becoming eighteen palettes. Whichever band the fields give a colour to, every icon in that band shares it; a band left unfilled stays black on white, and its emptiness is a distinction rather than an omission.
Never
- ✕ gradients, 3D, bevels, glows, drop shadows, glass, metal
- ✕ a second stroke weight, or a hairline interior line
- ✕ text, labels, numbers or band headings on the sheet
- ✕ a noun in the actions band, or an object leaning on the ideas band as a crutch
- ✕ icons of visibly different sizes, or a crowded grid with no margin
- ✕ two icons that read the same — if two come back alike, that is the set telling you they are one idea, and the answer is to cut one rather than redraw it
The result
A sheet that answers a question the icons cannot answer one at a time: is this a set, or is it a pile? The bands make the answer visible, and the row that struggles tells you which part of the product has no vocabulary yet.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six FIELDS lines. Fill the three bands separately — the moment one band runs dry is the finding, and it is worth more than the board.
- Paste it into any image-capable agent or model, in one message. One run returns the sheet.
- Read it by rows. Icons that fail read as odd within their own band, which is far easier to see than judging eighteen marks against nothing.
What you swap
- The subject
- Vibary — designing and shipping interfaces by describing them
- Objects — things you could photograph
- a laptop, a keyboard key, a terminal window, a colour swatch, a stopwatch, a paper plane
- Actions — things someone does
- describe it, scrub a timeline, copy code, paste it in, publish, undo
- Ideas — things with no body
- motion, easing, a version, a draft, taste, momentum
- The line and the fills
- one heavy black contour on every icon, flat fills inside, rounded ends, no hairlines
- The colour budget
- objects in #5B5BD6 indigo · actions in #E8C468 ochre · ideas unfilled, black on white
Before it runs
- Six things in each band, and the ideas band is the honest one. If nothing abstract can be named, the product is a tool rather than a system, and the set should be twelve icons instead of eighteen.
- A stroke weight decided once. Icons drawn at different weights cannot be rescued by arranging them well.
- Willingness to rename. An icon that fits no band is usually a feature nobody can describe in one word.
When to reach for it
When a product needs its icons all at once rather than one at a time — a nav bar, a feature grid, an empty-state library. Also the fastest way to find out whether a product's vocabulary is a set or a pile.
What changes
- One board carrying the whole set at a consistent size and weight, so the icons are judged against each other rather than in isolation.
- The grid is banded by abstraction — objects, then actions, then ideas — which is the split that actually breaks icon sets, and the one every source of this kind leaves to chance.
- Every icon is drawn at one stroke weight with flat fills inside it, so nothing reads as borrowed from another family.
- Colour is budgeted per band rather than per icon, which is what stops eighteen marks becoming eighteen palettes.
- An icon that will not sit in any band is a naming problem surfaced early, before it ships into a nav bar.
Pairs with
- Eight Marks, One BoardFour fields in, one presentation board back — eight logo directions in four construction families, captioned, ready to argue over.
- Fifteen Instants, One SportA pictogram sheet for anything with a repertoire — a sport, a craft, a working loop — where each figure is drawn at the one instant that names the move. Five fields.
- Letters on a WallA name mounted as dimensional letters on a real building, photographed from the street — where the material, the wall and the light are chosen as one set rather than picked separately. Six fields.