Icons
The icon set
Section titled “The icon set”Every icon in MaterialIcons.tsx, read straight from the code, so a new icon
shows up here by itself. Each is its own hand-placed SVG (mostly Google’s
Material Symbols), not an icon font. They were picked when nothing in an icon
library matched the Figma closely enough.
- Default size is 24px square. A few glyphs that aren’t naturally square (Where, Who) are centred and scaled to fit, not stretched.
- A handful of other icons come from icon libraries (
react-icons,lucide-react) where they matched, like the Shuffle on Randomise.
Colour
Section titled “Colour”Every icon fills with the colour of the text around it. It never has a colour of its own. So an icon always matches the badge, button or footer it sits in: coral in an action, white in a title pill, coral in the footer when it’s the page you’re on.
Weather icons
Section titled “Weather icons”Seven conditions from the Meteocons set, each a gently moving animated SVG. Only clear, partly cloudy and thunderstorms have separate night versions; cloudy, fog, rain and snow look the same at night.
Each icon also has a still version, which swaps in automatically when “reduce motion” is on. These animations can’t be paused with CSS, so the app ships two files per icon instead.
Where they’re used
Section titled “Where they’re used”On the When page while voting is open: the leading place’s average daytime high and night-time low for the leading month, rounded to a whole degree, always white over a photo. Here: Whistler in August.
The numbers come from three years (2021–2023) of Open-Meteo history, built into the app for each city and month rather than fetched live. Jaunt’s list of places is fixed, so this keeps it fast and free.
Source
Section titled “Source”src/web/components/MaterialIcons.tsxsrc/web/components/WeatherIcon.tsx,src/web/data/climate.ts