Iconography
Bespoke glyphs for agricultural measurements, with Heroicons for general interface actions.
Try it
Switch sets, change the size, and turn off Animate to see each glyph’s resting frame.
windspeed
wind-direction
temperature
pressure
humidity
dew-point
solar-radiation
fire-index
rainfall
water-flow
irrigation-spray
flow-total
tank-level
water-temperature
soil-moisture
soil-temperature
leaf-wetness
evapotranspiration
conductivity
battery
signal
schedule
Set
Size
Animate
<script src="/widgets/icons-core.js"></script>
<link rel="stylesheet" href="/widgets/motion.css">
<Glyph name="evapotranspiration" size={24}
/>Measurement glyphs
Forty-seven glyphs, one for each thing a sensor measures. Each one moves, and the movement shows the reading.
Air & weather
windspeed
wind-direction
temperature
pressure
humidity
dew-point
solar-radiation
fire-index
frost
Water
rainfall
water-flow
irrigation-spray
flow-total
water-pressure
water-temperature
water-quality
effluent
weir
Level & storage
tank-level
reservoir
river
silo
trough
fuel
fertilizer
Soil & plant
soil-moisture
soil-temperature
leaf-wetness
evapotranspiration
conductivity
dendrometer
Power, control & movement
battery
power
signal
schedule
engine
pump
valve
tilt
movement
piezometer
Stations & assets
weather-station
soil-probe
rain-gauge
fridge
gps
generic
rainfallfalls
windspeedsways
temperaturerises
pressureswings
signalfills
batteryglows
water-flowspins
irrigation-spraydrips
evapotranspirationlifts
fire-indexflickers
Interface icons
Everything that isn’t a measurement uses Heroicons from the solid set, at 24×24: navigation, settings and alerts.
Graphs
Sites
Groups
Users
Map View
Clients
Operations
Settings
Log out
bell
edit
alertTriangle
shield
key
Sizes
Five sizes, shared by both sets.
xs · 14
sm · 16
md · 20
lg · 24
xl · 32
Usage
- Use a measurement glyph to show what a sensor measures.
- Use a solid Heroicon for navigation, settings and alerts.
- Size both sets with the five icon tokens. Don’t use sizes between them.
Accessibility
A glyph has no text of its own, so show the measurement’s name beside it. With reduced motion on, every glyph holds a resting frame that still shows the reading.
Soil moisture
reading, labelled
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --size-icon-xs | 14px | Inline with 11px table text. |
| --size-icon-sm | 16px | Inside a button or field. The default. |
| --size-icon-md | 20px | Card headers. |
| --size-icon-lg | 24px | Sidebar and dialog headers. |
| --size-icon-xl | 32px | Empty states. |
| --size-icon-button | 24px | Icon button hit area. |