Skip to the page
Nitti Design System

Icons

One set, Lucide, drawn at a 1.6 stroke in the colour of the text around it. An icon is shown in one of seven ways, and which one depends on what the icon is doing, not on where it sits. The same 25 icons, the ones both products use most, are shown in each.

Which one

Ask what the icon is doing. One answer, one treatment.

It sits beside a label, or in a menu or a headingBare
It is an action and there is no room for a labelButton
It is the one main action of a surface (send, add)Filled button
It is a choice among tools or viewsToggle
It stands for a thing: a workroom, a file, a pluginTile
It is another product's logoLogo tile
It is a state: working, done, failedStatus
It is a personAvatar, never an icon

Bare

The icon alone, in the colour of its text. This is the default, and most icons in the products are this.

Use for
Beside a label in navigation, menus, buttons and widget headings; in running interface text.
Not for
Anything you can click on its own: that is a button. Never tinted with the accent, except the active item in navigation.
Sizes
16 px everywhere. 14 px in dense rows, captions and menus. 20 px in navigation on touch and in empty states.
  • Add
  • Search
  • Edit
  • Copy
  • Download
  • Open
  • Refresh
  • Delete
  • Close
  • Done
  • More
  • Adjust
  • Move
  • Document
  • Folder
  • Mail
  • Calendar
  • Conversation
  • News
  • Chart
  • Table
  • Site
  • Plugin
  • Assistant
  • Tasks
Sizes
With a labelDocumentFolderMail

Button

An action with no label: a round, quiet button that fills on hover. The widget's move handle is one of these.

Use for
Actions in toolbars, headings and rows where a label will not fit. Every one has a tooltip and an accessible name.
Not for
The main action of a surface (fill it), a choice among options (a toggle), or an icon that does nothing.
Sizes
28 px with a 14 px icon in tiles and rows. 32 px in toolbars. 36 px on its own. 44 px on touch.
Sizes
StatesRestHoverDisabled

Filled button

The same round button, filled. In the accent for the one main action of a surface; in the quiet fill for a control that should always be seen.

Use for
Accent: send in the composer, add on a list, one per surface. Quiet fill: a control that must not hide until hover, such as a card's menu on touch.
Not for
More than one accent button in view. Rows of filled buttons: use bare buttons, or a toggle.
Sizes
The button sizes. The icon is 16 px, 20 px in the composer's send.
Accent

Toggle

A choice among tools or views. Related choices share one tinted group; the chosen one lifts onto its own surface and takes the accent. From Polyther's site editor.

Use for
Modes and views where one is always on: select, edit, pan; desktop, mobile; list, board.
Not for
Actions that happen once (a button), and settings that are on or off by themselves (a switch).
Sizes
32 px items with a 16 px icon, in a group. Two to five choices; more than five is a menu.

Tile

An icon standing for a thing, on a rounded square of quiet fill. It gives a workroom, a file or a plugin a face in a list or a card.

Use for
Lists and cards of things: workrooms, resources, plugins, file types, and the icon of an empty state.
Not for
Actions, and decoration: a tile says here is a thing. Coloured tiles only when the thing has that state, or is the product's own.
Sizes
32 px with a 16 px icon in rows. 40 px with 20 px in cards. 56 px with 28 px in empty states. The corner is always 28% of the size.
Sizes
Tones
In a rowBrief for the hearingDocument · edited today

Status

A state is a dot or a spinner with words beside it. Colour never carries the meaning alone.

Use for
Whether something is working, done, waiting or failed: in badges, rows and the sidebar.
Not for
Decoration, and counts (use a badge with the number).
Sizes
A 6 px dot. The spinner at the size of the text's icon, 14 or 16 px.
WorkingConnectedNeeds attentionFailedNewPausedReading 143 responses

Rules

What keeps the set one set.

  • One library: Lucide. No hand-drawn glyphs beside it; a meaning that Lucide lacks is requested here first.
  • One stroke: 1.6, set once for the whole product. Never set a stroke on a single icon.
  • Three sizes: 14, 16 and 20 px (28 px only inside the large tile). No 13, 15, 17 or 18.
  • One glyph per meaning, in the table above: More is the ellipsis, Close is the X, Open elsewhere is the arrow leaving the box.
  • Icons take the colour of their text. The accent marks the active navigation item, the chosen toggle and the main action, nothing else.
  • An icon that can be clicked alone has a tooltip and an accessible name; one beside its label is hidden from screen readers.
  • Disabled is 50% opacity, everywhere.