Icons

Two sets of stroke icons on one skeleton — interface and manufacturing operations. The glyph overview, the size scale, and the rules for when to label an icon and when to leave it decorative.

The set

alertarchivearrow-rightboltbuildingbulbchatcheckchevron-downchevron-rightclockclosecopydownloaddragfileforwardglobegridinboxinfolistlockmailmapmenuminusmorepaperclipphoneplusreplyresetsavesearchsendshareshieldslidersstarstar-filledtagtrashtruckuploaduserzoom-inzoom-out

Files

Both sets can be downloaded as files — one glyph, one SVG, drawn by the same component the application draws with. So an icon never has to be redrawn, and cannot part company with the one in the product.

Download the set (92 SVG)Sprite for the web

Sizes

Size is not a free choice: every step has its place. Nothing is set between the steps, because half a pixel off throws the whole row off its baseline.

13 · small button14 · button15 · navigation20 · empty state

Operations

A second set on the same skeleton: manufacturing technologies — cutting, forming, machining, joining, finishing, inspection and logistics. It appears on machine operations, in the production chain setup and in the capacity overview. The grid below is the whole set as the kit knows it; the key is stored by the server and is never translated.

anodizeassemblybendborecadcmmdeep_drawdfmdrillengravegluegrindheat_treatinspectkitlaserlathemarkmeasuremillnestpackplasmapolishpowder_coatpress_brakeprint_3dquenchrivetrollingsandblastsawshearslaslssolderstampstoragethreadtoolingtumblewaterjetweldwire_edm

In a row

In a table the icon always stands next to the operation name and keeps the row's colour, not the category colour.

An example operation row with its icon
OperationKeyRateStatus
Laser cuttinglaser1 250 CZK/hActive
Bendingbend980 CZK/hActive
Weldingweld1 420 CZK/hAt capacity
Powder coatingpowder_coat640 CZK/hOutsourced

Rules

Both sets stand on one skeleton: a square 24×24 frame, a stroke width of 1.6 (with named exceptions where detail would otherwise merge), round caps and round joins. Colour is inherited through currentColor — an icon has no palette of its own, and the place where it stands gives it both colour and size.

  • The default is decorative: an icon next to its label is hidden from screen readers, so they do not say the same thing twice.
  • An icon standing alone and carrying meaning takes a title — screen readers then announce it.
  • A new glyph goes into the set, not into a screen. An icon drawn in one file is an island nobody finds next time.
  • An operation icon is set at 18–22 px: below 18 px the detail merges, above 24 px it reads as an illustration.
  • An operation's colour dot and its icon never share a row — either the colour, or the shape. Both say the same thing and contradict each other side by side.
  • An operation icon never stands without the operation name; the exception is a width-critical row, where it must carry a label for screen readers.
  • A new technology means a new icon in the set, never an emoji and never a picture.