Iconography - Flatpay Design

Principles

Three rules that decide whether an icon ships and how it's drawn. When in doubt, the principle wins.

NewvsNew

Principle 01

Earn the pixel

A good icon does work a label can't — flags state, marks an external link, fits a row that has no room for words. If the label alone reads cleanly, drop the icon.

Principle 02

Sized to the type

Three sizes only — 16, 20, 24 px. Pick the size that matches the type next to it, not the empty space around it. An icon is a glyph, not a graphic.

Principle 03

Inherits its color

currentColor by default. The icon takes the color of the text it sits with. Chroma enters only when state earns it — green, amber, rose, blue — and always paired with copy.

The set

We use the Outlined variant of Material Icons from @mui/icons-material. Lined, not filled. The set is large, well-drawn, and free — and the line weight reads as editorial against our off-white surfaces. The other Material variants (Filled, Rounded, Sharp, Two-tone) are not part of the system.

Inside the lab we ship a curated subset — the icons we've actually committed to using. Browse the library to see the full set.

tsx

import HomeOutlined from "@mui/icons-material/HomeOutlined";

<HomeOutlined sx={{ fontSize: 20 }} aria-hidden="true" />

Anatomy

Every icon is drawn on a 24 × 24 grid. The path lives inside it — never to the edge. Padding is what lets a 16 px icon sit next to body text without crowding it.

24 × 24 viewBox

Canvas. Every icon lives in a 24×24 viewBox. Render at 16, 20, or 24 — the same path, the same proportions.
Stroke. ~2 device pixels at 24 px. Outlined variants only — no filled, rounded, sharp, or two-tone mixed in.
Padding.~2 px of optical padding inside the viewBox. Don't crop to the path's bounding box; icons need breathing room to feel set, not cramped.
Alignment.Center to the cap height of adjacent text, not the line box. The eye reads the icon's optical middle, which sits a hair below mathematical center.

Sizes

Three sizes. Pick the one that matches the type next to the icon — not the container around it. Resist the urge to introduce a fourth.

16 px
Body and dense rows
Pairs with text-sm (14 px) and text-xs (12 px). Buttons. Inline status.
20 px
Section headings and inline emphasis
Pairs with text-base (16 px) and text-lg (18 px). Empty states. Status pills.
24 px
Standalone icon buttons and feature cards
Pairs with text-xl (20 px) and up. Reserve for surfaces where the icon is the affordance, not an accent.

Color

Icons inherit from currentColor— the color of the text they live with. The exception is status. Color carries meaning when it's rare; an icon set painted in brand colors loses its signal.

Inherits from text

Manifest is up to date.

The icon color is currentColor. Every shade comes from the surrounding text.

When state earns color

Demo ready
Building
Killed
Note

The four moments where chroma earns its keep — paired with status copy, never on its own.

Why not tint icons differently from their labels

Painting the icon brand-blue while the label sits in charcoal gives the icon a weight it doesn't need. The eye lands on the icon first, the meaning lands second. Use one color across icon and label so they read as a single unit.

Placement

Three placements account for nearly every icon in the product. Each has a size, a color rule, and a label rule.

In a button

16 px. Always paired with a label. Leading icon for verbs; trailing arrow for forward navigation.

Inline with text

View on GitHub

Saved

14–16 px. Anchored to the text's baseline. Mark a state, an external link, a small confirmation.

Standalone

18–20 px in a 32 px control. Reserved for dense rows where labels would crowd the data. Always carries an aria-label.

Icon or label

The default is a label. Icons appear when one of three conditions is true.

The icon flags state. Status pills, success confirmations, error markers. The icon doubles up the meaning of the color it carries.
The icon stretches the row. A dense table or list where adding another column of words would cost more than it pays. The action sits on its own with an aria-label.
The icon adds direction. A trailing arrow on a forward link, an external-link mark on a URL that leaves the app. Tiny semantic glyph, never a flourish.

Do and don't

Pulled from real product surfaces. The right column shows what the lab refuses to ship.

End-of-day report1.075,25 €
Settlement payout3.000,00 €

Lead with an icon when it differentiates a row at a glance — receipts vs. settlements vs. transfers all read with one fixation.

Balance

Recent reports

Activity

Don't

Don't decorate every heading. The hierarchy already reads; the icons just add noise and turn the page into a sea of identical glyphs.

Pair an icon with a verb in primary actions. The pixel earns its keep by reinforcing the action without growing the button.