One Subject, Three Signs
A soft-3D app icon on white — one object and exactly three signs around it, counted strictly, with one accent colour and a silhouette that survives being small. Six fields.
Two runs of the same template. A book of lit screens beside a weathered harbour buoy — a soft plastic subject against a painted metal one, and both times exactly one object, three signs, and a single colour landing on the sign nearest the viewer.
Generated from this template with the fields shown above — three signs and no fourth, the indigo cursor nearest and carrying the only saturated colour, everything else bone and pale screen-blue, and the book still nameable from its outline at thumbnail size. The reference's baseline is why the counting law is written the way it is. Asked for a subject plus two to four supporting elements, it returned seven: a compass, a pin, a car, a ticket, two arrows and a marker. The arrows and the route line were never thought of as elements at all, which is exactly how these icons silt up — so the rule here is that everything which is not the subject counts, and the count is exact. Its three saturated colours also left nowhere for the eye to land, hence one accent on one sign. Run-to-run quirks: both runs returned a transparent background rather than the seamless white asked for and had to be flattened, and the cursor breaks the subject's lower edge, which the template permits at the bottom but not at the top or sides.
Generated for this library
Input
For Vibary - a library of interface patterns you can copy
Subject a chunky open book whose pages are lit screens,
tilted three-quarters
Signs a cursor arrow · a bookmark ribbon · a small stack of
pattern cards
Accent the cursor arrow, bright indigo, nearest the viewer
Materials soft matte plastic body, glossy jelly screens, matte
ribbon
Palette bone white and pale grey, one bright indigo accent
Returned 1 icon · 1:1 · seamless white, no scene
subject the book centred and tilted, filling about seven tenths
of the frame, its outline unbroken
signs three and no more - arrow upper right and nearest,
ribbon at the spine, cards resting at the lower left
accent indigo on the arrow only; everything else bone, grey
and pale screen-blue
material matte body, wet-looking screens, one soft studio light,
the faintest contact shadow
small at thumbnail size the book still reads as a bookYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1What the icon is for
- 2The subject
- 3The three signs
- 4Which sign carries the accent
- 5The materials
- 6The palette
One Subject, Three Signs
Produce ONE image, square: a soft-3D icon composition on seamless white. Follow every line. 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
- What the icon is for: {the product, feature or service} e.g. Vibary — a library of interface patterns you can copy
- The subject: {one object, and how it is turned} e.g. a chunky open book whose pages are lit screens, tilted three- quarters
- The three signs: {three small elements, each meaning something} e.g. a cursor arrow · a bookmark ribbon · a small stack of pattern cards
- Which sign carries the accent: {one of the three, and its colour} e.g. the cursor arrow, in bright indigo, nearest the viewer
- The materials: {what the parts are made of} e.g. soft matte plastic body, glossy jelly screens, matte ribbon
- The palette: {a quiet base, and one accent} e.g. bone white and pale grey, one bright indigo accent
The counting law
Three signs. Not about three. Three.
And everything that is not the subject counts as a sign: arrows, route lines, ribbons, sparkles, dots, badges, floating cards, orbit rings, little clouds. This is where these icons silt up — a template caps the extras at a number, a run adds two arrows and a curved path without ever thinking of them as elements, and the icon ends up saying one idea six times. A reference run of this style asked for two to four and returned seven.
Count them in the result. If there are more than three, the run failed, however handsome it looks.
The thumbnail law
An icon is seen at the size of a fingernail. Build for that size and let it happen to look good large.
- The subject's silhouette must be nameable in solid black. If it needs its colour to be identified, choose a different subject.
- No sign may break the subject's outline at the top or the sides. Signs overlap the subject's face, never its profile.
- The subject fills 65–75% of the frame. Smaller and it is a scene; larger and it is a product shot.
Arrangement
- The subject sits centred, tilted into a three-quarter view or a slight overhead, with a little lean so it is not square-on.
- The three signs form a triangle around it — one clearly nearest the viewer, two further back. Never spaced evenly around the perimeter like a clock face.
- Each sign means something about the function. A sign that is only decoration is one of your three spent on nothing.
Colour
- The base is quiet: bone, off-white, pale grey, one soft mid-tone drawn from the subject.
- One accent, on one sign, once. The accent's job is to be the only place the eye lands first. Two saturated colours cancel each other and three make a toy.
- Everything not carrying the accent uses the base palette.
Material and light
- Rounded edges everywhere, full volumes, no sharp corners.
- Materials chosen for what the thing is: matte plastic, jelly, ceramic, brushed metal, frosted glass, soft rubber. Two or three at most, and each one clearly different from the others.
- One soft studio light, gentle falloff, no hard shadow. A very faint contact shadow directly beneath the group and nothing else.
- Seamless white background, generous margin, nothing behind the subject.
Never
- ✕ a fourth sign, counting arrows, lines, sparkles and dots
- ✕ signs spaced evenly around the subject instead of in a triangle
- ✕ a second saturated colour
- ✕ anything breaking the subject's silhouette at its top or sides
- ✕ people, scenery, sky, ground plane or environment
- ✕ text, numbers, logos, badges or watermarks
- ✕ a hard drop shadow, a coloured background, or a visible frame
The result
An icon that works at a fingernail and holds up on a billboard: one object you can name from its outline, three signs that each earn their place, and exactly one thing in colour.
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. Choose the three signs by asking what three things somebody needs to know about the subject — not by what would look nice around it.
- Paste it into any image-capable agent or model, in one message. One run returns the icon.
- Shrink the result to the size of an app tile and look at it. If you cannot tell what the subject is, the composition failed, however good it looks large.
What you swap
- What the icon is for
- Vibary — a library of interface patterns you can copy
- The subject
- a chunky open book whose pages are lit screens, tilted three-quarters
- The three signs
- a cursor arrow · a bookmark ribbon · a small stack of pattern cards
- Which sign carries the accent
- the cursor arrow, in bright indigo, nearest the viewer
- The materials
- soft matte plastic body, glossy jelly screens, matte ribbon
- The palette
- bone white and pale grey, one bright indigo accent
Before it runs
- A subject with a nameable silhouette. The icon will be seen at the size of a fingernail, and a shape that needs its colour to be identified will not survive it.
- Exactly three signs, chosen for meaning. A fourth is not generosity — it is the thing that makes the icon unreadable small.
- One accent colour you are willing to spend on one element. Two accents is no accent.
When to reach for it
When a product, a feature or a service needs a hero icon: an app tile, a store listing, a feature card, a pricing row. Templates in this style cap the extra elements at a number and then let arrows, lines and sparkles arrive uncounted, so the icon says its one thing six times.
What changes
- One clean icon composition on seamless white: a single object, tilted, with three signs arranged around it.
- The count is enforced rather than suggested — arrows, ribbons, sparkles and dots all count, which is what keeps the icon from silting up.
- One accent colour on one sign, so there is somewhere for the eye to land instead of three colours competing.
- Materials do the storytelling: soft plastic, jelly, ceramic, brushed metal, frosted glass, chosen for what the subject is.
- The whole thing is built to survive a thumbnail, which is the only test an icon ever really faces.
Pairs with
- Every Control Says Where It IsA hyper-skeuomorphic app icon of a real device, front-on — with every control carrying an indicator and every indicator agreeing about what state the thing is in. Five fields.
- Fur Over Every EdgeA plush creature character rendered full-length — held to the one thing that decides whether it reads as fur or as vinyl with fur printed on it: what happens where the coat meets anything hard. Six fields.
- Hands Out of FrameA soft 3D character portrait in the art-toy idiom — built around choosing a pose that cannot go wrong, because the one thing these renders always break is named and never solved. Six fields.