P&ID process screen
A process view with alarm acknowledge built in.
UNIT 100
- PI-101Discharge pressure high
- LT-101Level high
- FV-101Control valve · Failure
UI kit for industrial and operator screens
Industrialsymbols forreal operatorscreens
Original SVG and React symbols for P&ID diagrams, electrical, automation and gauges. Drawn from scratch for web developers, simulator builders and automation engineers.
The free starter pack includes symbols from all four sets and one dashboard block.
Alarms 0 active
- No active alarms
01 / Symbols
Four sets, one props API
- P&IDValves in many body and actuator types, pumps, compressors, vessels and columns. Instruments in ISA 5.1 style, plus filters, fittings and lines.Open set
- ElectricalBreakers, contacts, relays, transformers, motors and generators. Measuring instruments, semiconductors, busbars, cables and earthing.Open set
- AutomationLogic and function blocks, timers, counters and ladder elements. Operator buttons, readouts, alarm priorities and status icons.Open set
- GaugesDials, linear scales, tank levels and thermometers. Digital and seven-segment readouts, plus marine instruments such as rudder, compass and wind.Open set
compressor, Compressor, Compressorsantenna, Antenna, Radio and sensorsbtn-forward, Forward button, Operator buttonsgauge-dial-270-plain, 270 degree dial, needle, Dial gaugesvalve-gate-motor, Gate valve + electric motor actuator, Valves: actuatedsw-contactor, Contactor (power), Switching devicescomm-signal-4, Signal strength, 4 bars, Status iconsgauge-dial-270-digital, 270 degree dial, needle with digital readout, Dial gaugesvalve-ball, Ball valve, Valves: bodiessw-thermal-relay, Thermal overload relay, Switching devicessensor-probe-ec, Conductivity probe, Sensorsgauge-dial-240-digital, 240 degree dial, needle with digital readout, Dial gaugesvalve-butterfly-solenoid, Butterfly valve + solenoid actuator, Valves: actuatedcontact-no-key, NO contact, key, Contacts and operatorsfbd-and, AND block, FBD: logicgauge-dial-180-dual, half-circle dial, two needles (value and setpoint), Dial gaugesvalve-needle-manual, Needle valve + manual handwheel, Valves: actuatedcontact-nc-knob, NC contact, rotary knob, Contacts and operatorsfbd-or-iec, OR, IEC 60617 box, FBD: logicgauge-dial-90-dual, quarter dial, two needles (value and setpoint), Dial gaugesvalve-diaphragm-piston-pn, Diaphragm valve + pneumatic piston actuator, Valves: actuatedcontact-co-limit, Changeover contact, limit / cam, Contacts and operatorsfbd-ctu, Up counter, FBD: countersgauge-linear-h-bar-setpoint, Horizontal bar with setpoint, Linear scalesvalve-3way-manual, Three-way valve + manual handwheel, Valves: actuatedrelay-undervoltage, Undervoltage relay (U<), Protection relaysfbd-max, Maximum, FBD: selectiongauge-linear-v-bipolar, Vertical centre-zero bar, Linear scalesvalve-globe-solenoid-fo, Globe valve + solenoid actuator, fail open, Valves: fail positionlamp, Lamp, Signallingfbd-mul, Multiply, FBD: mathgauge-linear-v-led-zones, Vertical LED segments with zones, Linear scalesvalve-globe-diaphragm-fl, Globe valve + pneumatic diaphragm actuator, fail last, Valves: fail positionpotentiometer, Potentiometer, Passivefbd-cos, Cosine, FBD: mathgauge-tank-vertical-setpoint, Vertical tank level, with setpoint line, Level and tank gaugessteam-trap, Steam trap, Valves: specialinductor-core, Inductor with magnetic core, Passivefbd-pid, PID controller, FBD: process controlgauge-tank-horizontal-digital, Horizontal tank level, with percent readout, Level and tank gaugesinst-field-fic, Flow indicating controller (FIC), field mounted, Instruments: field mounteddiode-schottky, Schottky diode, Semiconductorsfbd-integrator, Integrator, FBD: process controlgauge-tank-conical-plain, Conical tank level, plain, Level and tank gaugesinst-panel-pt, Pressure transmitter (PT), main control room panel, Instruments: main control room panelbjt-npn, Transistor NPN, Semiconductorsfbd-feedforward, Feedforward, FBD: process controlgauge-thermo-zones, Thermometer, with zones, Thermometersinst-field-at, Analyzer transmitter (AT), field mounted, Instruments: field mountedpv-panel, PV panel, Sourcesld-contact-nc, Normally closed contact, Ladder (LD)gauge-digital-trend-arrow, Readout with trend arrow, Digital indicatorsinst-field-lal, Level alarm low (LAL), field mounted, Instruments: field mountedmotor-ac, AC motor, Rotating machinesld-contact-compare, Compare contact, Ladder (LD)gauge-seg7-4-zone, Seven-segment 4 digits with zone bar, Seven-segment displaysinst-field-xa, Unclassified alarm (XA), field mounted, Instruments: field mountedgenerator-ac, AC generator, Rotating machineshmi-btn-increase, Increase button, Operator buttonsgauge-meter-frequency-meter, Frequency meter, Named meterspump-vacuum, Vacuum pump, Pumpstransformer, Two-winding transformer, Transformershmi-sel-loc-rem, LOCAL / REMOTE selector, Switches and selectorsgauge-meter-percent-meter, Percent meter, Named meterstank-cone-roof, Atmospheric tank, cone roof, Vesselstransformer-3w, Three-winding transformer, Transformershmi-readout-bar-h, Horizontal bar, Readouts and gaugesgauge-damper-position, Damper blade position, Position gaugesfilter-bag, Bag filter, Process equipmentmeter-wattmeter, Wattmeter, Measuring instrumentshmi-trend-step, Step response icon, Readouts and gaugesgauge-wind-direction-speed, Wind direction and speed, Marine indicatorsorifice-plate, Orifice plate, Inline elementsmeter-recorder, Recorder, Measuring instrumentshmi-badge-remote, Remote mode badge, Badgesgauge-battery-soc-zones, Battery state of charge with low warning, Power and energyhyd-motor-fixed, Hydraulic motor, Fluid powercrossing, Crossing (not connected), Busbars and linkshmi-prio-4, Priority 4 (low), Alarm prioritygauge-gas-cylinder, Gas cylinder level, Fuel and gasthruster-azimuth, Azimuth thruster, Marine and machineryshield, Screened cable, Cables and terminalshmi-st-alarm, Alarm, Status iconsgauge-trend-bars, Mini bar trend, Trends
02 / States
Five states on every symbol
Each state has its own shape as well as its color. A symbol reads correctly without color.
FV-101 · Running
Green. The equipment is operating normally.
In color
Without color
03 / Spec
- 01
Five states per symbol
Running, warning, failure, stopped and no data. Each state uses color and shape.
- 02
Four themes
Bright, day, dusk and night. The same symbols work in every theme.
- 03
Rotation and three sizes
Rotate in 90 degree steps. Pick one of three sizes for dense diagrams or large panels.
- 04
Keyboard and screen reader support
Symbols support keyboard use and work with screen readers.
- 05
Motion that respects your settings
Animation follows the reduced-motion setting on the user's device.
- 06
React components and plain SVG
Typed React components share one props API. Plain SVG files and a JSON manifest are included.
04 / Dashboards
Dashboard blocks for operator screens
Blocks you can place on a screen and adapt to your data.
Goal rings
Ring gauges that show progress toward a target.
- Uptime82%
- Batches8
- Checks18
Activity feed
A running list of events, changes and operator actions.
- P-101started by operator
- FV-101setpoint changed to 42 %
- LT-101high level alarm
- LT-101alarm acknowledged
Calendar and kanban
A schedule view and a task board for shift and maintenance work.
MonTueWedThuFri
Shift ACrew 1Crew 2Crew 3Crew 1Crew 2
Shift BCrew 2Crew 3Crew 1Crew 2Crew 3
Shift CCrew 3Crew 1Crew 2Crew 3Crew 1
To do 3
Check P-101 seal
Calibrate LT-101
Clean Y-strainer
Doing 2
Swap FV-101 positioner
Inspect E-101
Done 1
Test LAH-101
05 / Prompts
Build full screens with an AI assistant
Prompt files for Claude Code, Cursor and v0. Paste one in, then describe the screen you need.
Using the PIDSTACK components, build a P&ID screen for a two-tank process with a feed pump and an outlet valve. Add an alarm list on the right where each alarm can be acknowledged with the keyboard.
06 / Pricing
Pricing
Pay monthly or once. Every plan uses the same commercial license.
Free starter
$0
- Symbols from all four sets
- The P&ID process screen block
- Five states and four themes
- Same commercial license as Pro
Pro
$12 per month
- The full library in four sets
- All dashboard blocks
- Typed React components and plain SVG files
- Updates while your subscription is active
Lifetime
$149 once
- The full library in four sets
- All dashboard blocks
- Prompt files for Claude Code, Cursor and v0
- Updates to the library as released
Prices are in US dollars. You get a receipt by email after payment. Compare plans
07 / FAQ
FAQ
The components are typed React. Every symbol also ships as a plain SVG file.
Yes. The commercial license covers personal work, client work and your own products.
No. Reselling or redistributing the symbols as a library, icon set or UI kit is not allowed.
They follow common conventions such as ISA 5.1, IEC 60617 and IEEE 315 style. All symbols are drawn from scratch.
Yes. Use the plain SVG files and the JSON manifest in any framework or in plain HTML.
Each state has its own shape, so it reads without color. The no data state uses a dashed outline.
A selection of symbols from each of the four sets and the P&ID process screen block.
Paste a prompt file into Claude Code, Cursor or v0. Then describe the screen you want to build.