Icons
One small set, drawn for Mylder. Perron draws its own stroke icons rather than use an icon font or a third-party set: there are few of them, each drawn on a grid near the size it shows at. The files are in packages/perron/icons/, and icons.json there lists them by category with the size and use of each.
Sizes
Every icon renders at one of three steps, set with --perron-icon-size (one of the tokens below) and never with a raw width. Each icon is drawn on the grid closest to its step, so its stroke stays between 1.5 and 1.8 px. A larger icon is a new drawing, not a scaled one.
| Token | Value |
|---|---|
icon.size.325Inline with label and caption text: the disruption icons | 13 px |
icon.size.400Inside controls: search, zoom, locate, close | 16 px |
icon.size.450Top bar buttons: kiosk mode, about | 18 px |
Style
- Strokes with round caps and joins, 1.5 to 1.8 px on the icon's own grid. Fills only for a dot, such as the point of the info icon, and for
compass's needle, below. - Drawn in
currentColor, so an icon takes the colour of the text around it. Set the colour on the text, never on the icon. - The
.perron-iconclass inperron.csssizes an inline SVG icon from--perron-icon-size, and keeps it from shrinking in a flex row. - An icon sits next to a word or inside a labelled button; it never carries meaning alone. Next to text it is hidden from screen readers (
aria-hidden="true"). Alone, it needs an accessible name. - No icon font, no emoji, no third-party icon set. A new icon follows this page, joins
icons.json, and the check confirms its grid, stroke and colour. compassis a needle drawn pointing north, up, its north half filled so it tells north from south at any angle. The caller turns it about its centre against the map's heading, so the filled half always points to north on the map.aircraftis also the map's aircraft glyph. The file is an icon like the others, a stroke on its 14 px grid; the map and the map's legend fill or rim its outline by data state and draw it at the map's own sizes,map.aircraft-size.*, as Map says. That drawing is a map glyph, as a vehicle dot is, not an icon, so the fill and the sizes above don't bind it.
The set
Map
plusicon.size.400, 16 pxZoom in; step a number field upminusicon.size.400, 16 pxZoom out; step a number field downlocateicon.size.400, 16 pxCentre the map on the networkcompassicon.size.400, 16 pxWhere north is, and turn the map back to it: a needle pointing up, turned to the map's headingcubeicon.size.400, 16 pxTilt the map into 3D, and back to flatpauseicon.size.400, 16 pxStop the vehicles moving on the mapplayicon.size.400, 16 pxSet the vehicles moving againaircrafticon.size.325, 13 pxAn aircraft seen from above, pointing north: on the map, turned to its track, and in the map's legend
Actions
searchicon.size.400, 16 pxThe search fieldcloseicon.size.400, 16 pxClose a panel, a dialog or a highlightchevron-downicon.size.400, 16 pxOpen a select's list, or an accordion's panelchevron-righticon.size.400, 16 pxA menu row that opens a submenu
App
monitoricon.size.450, 18 pxKiosk modeinfoicon.size.450, 18 pxAbout and help
Disruptions
warningicon.size.325, 13 pxDelayssignal-officon.size.325, 13 pxData feed problemsdiversionicon.size.325, 13 pxDiversionscalendaricon.size.325, 13 pxPlanned workscheck-circleicon.size.325, 13 pxRunning normally
Controls
tickicon.size.325, 13 pxA ticked checkbox, and the chosen option in a listdashicon.size.325, 13 pxA checkbox that stands for a set partly tickedarrow-downicon.size.325, 13 pxThe column a table is sorted by: pointing down when descending, turned up when ascending
Feedback
exclamation-circleicon.size.325, 13 pxA danger messageinfo-circleicon.size.325, 13 pxAn info message, and a service notice