Craft · Iconography

Icons as a system,
not a folder.

94 marks across three tiers: 18 glyphs at 16, 64 icons at 24, 12 pictograms at 48. Each tier is redrawn rather than scaled. Most of them do not exist in any library, because the things they name are specific to what I have built.

Tiers
16 · 24 · 48
Weights
Outline · Filled
Themes
Day · Night
Set size
94 marks · 3 tiers
Format
Inline SVG, currentColor
01 · Construction

Every icon starts on the same grid.

The grid is what makes a set feel like a set. A 24 unit canvas with a 20 unit live area leaves 2 units of padding, so icons never touch their bounding box and always sit level with adjacent text. Inside the live area, four keyline shapes handle almost everything: square, circle, and two rectangles. An icon that fits a keyline shape will optically match every other icon at the same size.

Canvas
24 × 24
The unit everything else is measured against.
Live area
20 × 20
2 units of padding on every side, so icons align with text baselines.
Stroke
1.5 → 1.35
Reduced in Night. Light strokes on a dark ground bloom and read heavier.
Corner radius
2.5
Matches the product UI radius, scaled down to icon size.
Terminals
round · round
Round caps and joins. One decision, applied to all 24.
Colour
currentColor
No colour is baked in. Icons inherit from the context they sit in.
02 · The set

Five families, one grammar.

Each family serves a domain I have actually shipped in. Switch the weight and the theme to see the grammar hold across all of them.

Model behaviour

Icons for the states an LLM product actually has. Nobody ships these, because most teams never design them: uncertainty, grounding, drift, the handoff to a human. Half of this family exists because I needed it and could not find it.

Divination

NovaVista's subject matter: tarot, energy work, astrology. Where the model family is clinical, this one is allowed personality. Same grid, same stroke, opposite temperament.

Capital & property

YELDO's vocabulary. The capital-structure icon is the one I care about: senior, mezzanine and equity as three stacked bands, because that diagram was the hardest thing to make legible in the whole product.

Bureaucracy

PraticheEasy's world. The counter window and the paper queue are the two I would keep if I could only keep two: they name the feeling the product exists to remove.

Craft

The making side. Blender, the camera, the keyline grid these icons were drawn on. The cube is here because 3D is the thing most visual designers stop at, and I did not.

03 · Two weights

The rule for which weight, when.

Two weights are only a system if there is a rule for choosing between them. Without one they are two folders that slowly drift apart.

Outline · 1.5 stroke

For 20px and above, on light grounds, and anywhere the icon has room to breathe: feature cards, empty states, section markers. At larger sizes the counters stay open and the thin stroke reads as precision.

Filled · solid

For under 20px, on dark grounds, and for active states: tab bars, dense tables, selected navigation. Below 20px a 1.5 stroke starts to break up, while a solid silhouette survives. Filled also does the work of an active state without adding a colour.

04 · Tiers

Three sizes, three drawings.

A scaled icon is not a smaller icon, it is a worse one. At 16px the 24px drawing clogs: counters close, dashes merge, detail turns to mud. At 48px the same drawing looks thin and empty. So each tier is redrawn. The glyph removes elements rather than shrinking them. The pictogram adds a scene, and takes a lighter relative stroke, 2 at 48 instead of the 3 that scaling would give, because more detail needs a finer line.

Glyph · 16
Icon · 24
Pictogram · 48
Together
Handoff3 tiers
Counter window3 tiers
Capital stack3 tiers
Tarot3 tiers
Glyph
16 · stroke 1.25
Dense UI, table rows, inline with 13px text. 18 drawn.
Icon
24 · stroke 1.5
The workhorse tier. Buttons, lists, cards. 64 drawn.
Pictogram
48 · stroke 2
Section openers, empty states, print. 12 drawn.
Total
94 marks
Across three tiers, two weights and two themes.
05 · Pictograms

Where an icon becomes a scene.

At 48 units there is room for narrative. These are not symbols standing for a word, they are small drawings of moments I have actually designed: the survey that had to stop feeling like a gate, the counter window a product exists to delete, the instant a model admits it does not know.

The reading

A tarot spread, a candle, and a hand. NovaVista's core moment, drawn as a scene instead of a symbol.

Capital stack

The diagram from YELDO: a building, and beneath it the three tranches that finance it. This is the drawing the whole case study turns on.

The counter window

An Italian public office: the window, the queue, the number. PraticheEasy exists to delete this picture.

The handoff

The moment the model stops. Confidence falls below the line, the answer is withheld, and a person takes over. The most important screen I have designed and the one nobody shows.

Design in code

Left, the editor. Right, the thing it renders. I work in both windows at once, which is the whole point of the claim.

The gate that is not a gate

The professional-investor survey: one question per screen, a progress bar that tells the truth, and a redirect instead of a rejection.

The workbench

How every mark in this set was made: keyline shapes, the live area, and the icon sitting inside it.

Two-sided

Consumer on one side, professional on the other, and the matching logic that has to be explained to both.

The set

Camera, light, and a subject that has to hold still. Two years of executing someone else's art direction, compressed into one drawing.

Reading the sky

An astrological chart: houses, aspects, and the lines between them. The kind of density that has to become legible without being simplified away.

The reminder engine

A date becomes a job becomes an email that arrives before it is too late. The loop that makes people come back.

The system

Tokens on the left feed components in the middle which compose the product on the right. Two hundred components, one direction of travel.

06 · Glyphs

The 16 tier, where detail dies.

Every glyph is the same idea as its 24px icon with elements removed until it survives at 16. Uncertainty keeps its broken arc but loses the centre dot. The queue keeps three heads and loses the bodies.

Uncertainty
Handoff
Guardrail
Prompt
Confidence
Streaming
Tarot
Spirit
Crystal
Chakra
Tranche
Yield
Access
Counter
Queue
3D
Draw
Form
07 · In place

Icons earn their keep in context.

An icon sheet always looks good. The real test is a component, where the icon has to sit next to type, take the accent colour, and not shout.

Verified professional

Identity and qualification checked before a profile goes live on the marketplace.

Deal performance

Historical return and distribution schedule, read at a glance before the detail.

Booking

Availability, session length and reminders, handled in one flow.