Lab 13 · Icons and motion · rebuilt on Untitled UI

Lucide, on our terms.

Every product this size ends up with a library of two hundred glyphs and no rule about when to use one. That happens because icons get treated as decoration for a control that already has a word on it.

This system needs far fewer, and the reason is a good one: it already encodes state in fill and colour. A status has a mark. A severity has an edge. A deadline has a border style. None of those want an icon on top, because a second encoding of the same fact is noise wearing a uniform. What is left is the small set of things a word cannot carry at a glance, and there are thirty-three of them.

They come from Lucide, which the wireframes already ship, brought onto our grid with a three property CSS override. The nav names below are the same ones lib/nav.ts imports today, so nothing has to be re-picked when this reaches the build.

The screens, rebuilt

Drawn fresh from the Untitled kit and the system’s ruled tokens, not restyled from the originals.

A sample of the rebuilt set · the full 170 live on the Icons page
plane
customers
booking
gate
bell
search
calendar
settings
The motion scale · one job: confirm
instant
0ms
anything driven by a keystroke
quick
90ms
hover and focus
enter
140ms · ease-out
anything appearing; five pixels of rise, never a scale
panel
180ms · ease-out
anything sliding from an edge
exit
90ms
everything leaving

Never moves: numbers, charts, table rows, skeletons. Under reduced motion every duration is zero, which is the proof none of it was load bearing.

The icon set itself was rebuilt as the system’s Icons page: 170 marks on the genuine Untitled spec, the travel and weather families taken path for path from the library.

The reasoning, kept

01 / the rule

An icon earns its place three ways, and no others.

02 / construction

Three properties bring a borrowed glyph onto the grid.

Lucide draws on a 24 unit grid with a 2 unit stroke, round caps and round joins. The round caps are the thing that would read as borrowed next to a hairline rule and a zero radius table. CSS beats the presentation attributes Lucide ships, so one rule fixes it everywhere, for every icon, including ones nobody has picked yet.

03 / the set

The thirty-three.

04 / what the set buys immediately

The kind column stops being a column.

Same booking, same nine items, same 31 pixel rows. The Kind column carried "Flight · 24 pax", "Hotel · 7 nights", "Transfer · 24 pax" in ninety pixels of width. Now the shape carries the kind and the figure carries the quantity, in twenty-eight.

04b / the toolbar, settled after three passes

Words for the buttons, a magnifier for the field.

Three attempts, and the third is right. Icon beside word was duplication. Icon instead of word looked tidy in a specification and thin in the actual product, because a bookmark and three vertical bars do not tell somebody what they do while a word always does. What survives is the field.

05 / motion

Motion confirms that something happened. Nothing else.

An operator opens this platform at nine and closes it at six. Anything that moves for pleasure is a thing they will watch four hundred times, and by the third week it is friction. So the rule is narrow: motion exists to tell a person their action landed, and to stop a surface appearing out of nowhere.

Ruled: the toolbar is words

Filter, Views and Columns are words with no icon. The search field keeps a magnifier because it is an input, not a button, and a bare box with a placeholder is ambiguous in a way a labelled button is not. The rule never bent: an icon never duplicates a word, and the magnifier is not duplicating one, it is marking a field.

In React it is a prop, not a stylesheet

<Plane strokeLinecap="square" strokeLinejoin="miter" strokeWidth={1.75} size={16} /> works too, but a wrapper component that applies the three defaults once is better than three props on every call site. Either way there is no fork of the library and no drawing to maintain.

Net and margin fitted, and that is the point

One column of shapes bought back enough width for net cost and margin per item, which an agent previously had to open the Commercials card to see. This is the same trade the funnel made when it collapsed three count columns into one: an icon is only worth its pixels when it lets a fact onto the screen that could not fit before. If the width is not spent on something, the icon is decoration.

Why the field is genuinely different

Filter, Views and Columns are buttons, and a button's word is its name. A search field has no name, it has a placeholder, and a placeholder is content that disappears the moment somebody types. The magnifier is the only thing that still says what the box is once a person has typed into it. That is not a label duplicating a word, it is the affordance surviving the content.

What three passes proved about the rule

The rule was tested from both sides in the same week. Adding an icon beside a word broke it. Removing the word to keep the icon technically satisfied it and made the product worse, which is the more dangerous failure, because a rule that can be satisfied while damaging the thing it protects is a rule stated at the wrong level. It is now stated at the right one: an icon may not replace a word that is doing work. The magnifier passes because no word was doing that work.

Where the toolbar landed, after three passes

Words for Filter, Views and Columns. A magnifier inside the search field and nowhere else. Export and Remind keep their words and take no icon. The rule was tested from both sides in one week and is now stated at the level that survives: an icon may not replace a word that is doing work. The magnifier passes because no word was doing that work; a placeholder disappears the moment somebody types.

The original document, in its own chrome and drawings, is kept unedited: open the original.
Tripbooks Design SystemBuilt on Untitled UI · Inter for language, IBM Plex Mono for every figureLight and dark from the same tokens