High-Contrast ESP32 Weather Icons
Budget: £10 – £20 GBP
I’m finalising a dual-mode weather interface (Marine + Land) for a 480 × 320 capacitive touchscreen running on an ESP32-S3. To complete the project I need a purpose-built icon suite that can be drawn instantly on modest hardware yet remain crystal-clear in full sunlight.
2. Icon Style Reference - Meteocons (Required)
All icons in this project must follow the visual language of Meteocons, a well-known flat weather icon set.
Meteocons Style Characteristics
• Flat, modern, minimalist
• Smooth geometric shapes
• Rounded corners
• Consistent stroke width
• No gradients
• No shadows
• No 3D effects
• No photorealism
• Transparent backgrounds
• High clarity at small sizes
• Strong contrast for sunlight readability
Why Meteocons?
• Designed specifically for weather data
• Highly legible at small pixel sizes
• Works perfectly with embedded displays
• Matches the Marine + Land dual-mode aesthetic
• Easy to adapt into monochrome or color variants
Designer Requirement
All icons must be created in a style visually consistent with Meteocons, including:
• Line thickness
• Shape simplicity
• Icon proportions
• Negative space usage
• Rounded line caps
• Minimal detail
3. Style Requirements
Visual Style
• Flat, minimalist
• No gradients
• No shadows
• Bold silhouettes
• Smooth curves
• Rounded corners
• Consistent stroke width
Stroke Width
2-4 px, consistent across all icons.
Color Palette
Marine Mode:
• White (#FFFFFF)
• Cyan (#00E5FF)
• Deep Blue (#003B73)
• Yellow (#FFEB3B)
• Red (#FF1744)
Land Mode:
• Light Blue (#4FC3F7)
• Grey (#B0BEC5)
• Orange (#FFB74D)
Background
Transparent only.
4. Icon Sizes (Mandatory)
• Primary Icons: 128×128 px
• Alert Icons: 96×96 px
• Secondary Icons: 64×64 px
• Status Icons: 32×32 px
5. File Formats
Required Formats
• PNG (32-bit RGBA)
• SVG
PNG Requirements
• Pixel-perfect
• Transparent background
• No compression artifacts
6. Folder Structure
WeatherUI_Assets marine land conditions alerts trends system
7. Full Icon List (72 Icons)
Marine Icons (18)
Wind Speed, Wind Direction, Gusts, Wave Height, Wave Period, Wave Direction, Swell Height, Swell Direction, Tide Rising, Tide Falling, High Tide, Low Tide, Visibility, Sea Temperature, Storm Warning, Gale Warning, Small Craft Advisory.
Land Icons (12)
Temperature, Feels Like, Humidity, Pressure, Rain Chance, Rain Amount, UV Index, Dew Point, Cloud Cover, Sunrise, Sunset, Moon Phase.
Weather Conditions (14)
Clear Day, Clear Night, Partly Cloudy, Cloudy, Overcast, Light Rain, Heavy Rain, Thunderstorm, Snow, Hail, Fog, Mist, Drizzle.
Alert Icons (9)
Red Alert, Amber Alert, Green OK, Storm Incoming, Lightning Risk, High Winds, Flood Warning, Extreme Heat, Extreme Cold.
Trend Icons (7)
Rising, Falling, Steady, Pressure Trend, Temperature Trend, Wind Trend, Rain Trend.
System Icons (12)
Home, Marine Mode, Land Mode, Settings, WiFi, Bluetooth, GPS, Battery, Charging, Menu, Back, Refresh.
8. Deliverables Checklist
• PNG (32-bit RGBA) for all icons
• SVG for all icons
• All required sizes (128, 96, 64, 32 px)
• Transparent backgrounds
• Correct folder structure
• Correct naming conventions
• Consistent stroke width
• Consistent color palette
• Preview sheet showing all icons together
Acceptance criteria
Icons render cleanly at intended size, maintain legibility in direct sunlight, and remain visually balanced whether the interface is in Marine or Land mode.
If you enjoy balancing aesthetics with hard technical limits, this should be a fun challenge.
2. Icon Style Reference - Meteocons (Required)
All icons in this project must follow the visual language of Meteocons, a well-known flat weather icon set.
Meteocons Style Characteristics
• Flat, modern, minimalist
• Smooth geometric shapes
• Rounded corners
• Consistent stroke width
• No gradients
• No shadows
• No 3D effects
• No photorealism
• Transparent backgrounds
• High clarity at small sizes
• Strong contrast for sunlight readability
Why Meteocons?
• Designed specifically for weather data
• Highly legible at small pixel sizes
• Works perfectly with embedded displays
• Matches the Marine + Land dual-mode aesthetic
• Easy to adapt into monochrome or color variants
Designer Requirement
All icons must be created in a style visually consistent with Meteocons, including:
• Line thickness
• Shape simplicity
• Icon proportions
• Negative space usage
• Rounded line caps
• Minimal detail
3. Style Requirements
Visual Style
• Flat, minimalist
• No gradients
• No shadows
• Bold silhouettes
• Smooth curves
• Rounded corners
• Consistent stroke width
Stroke Width
2-4 px, consistent across all icons.
Color Palette
Marine Mode:
• White (#FFFFFF)
• Cyan (#00E5FF)
• Deep Blue (#003B73)
• Yellow (#FFEB3B)
• Red (#FF1744)
Land Mode:
• Light Blue (#4FC3F7)
• Grey (#B0BEC5)
• Orange (#FFB74D)
Background
Transparent only.
4. Icon Sizes (Mandatory)
• Primary Icons: 128×128 px
• Alert Icons: 96×96 px
• Secondary Icons: 64×64 px
• Status Icons: 32×32 px
5. File Formats
Required Formats
• PNG (32-bit RGBA)
• SVG
PNG Requirements
• Pixel-perfect
• Transparent background
• No compression artifacts
6. Folder Structure
WeatherUI_Assets marine land conditions alerts trends system
7. Full Icon List (72 Icons)
Marine Icons (18)
Wind Speed, Wind Direction, Gusts, Wave Height, Wave Period, Wave Direction, Swell Height, Swell Direction, Tide Rising, Tide Falling, High Tide, Low Tide, Visibility, Sea Temperature, Storm Warning, Gale Warning, Small Craft Advisory.
Land Icons (12)
Temperature, Feels Like, Humidity, Pressure, Rain Chance, Rain Amount, UV Index, Dew Point, Cloud Cover, Sunrise, Sunset, Moon Phase.
Weather Conditions (14)
Clear Day, Clear Night, Partly Cloudy, Cloudy, Overcast, Light Rain, Heavy Rain, Thunderstorm, Snow, Hail, Fog, Mist, Drizzle.
Alert Icons (9)
Red Alert, Amber Alert, Green OK, Storm Incoming, Lightning Risk, High Winds, Flood Warning, Extreme Heat, Extreme Cold.
Trend Icons (7)
Rising, Falling, Steady, Pressure Trend, Temperature Trend, Wind Trend, Rain Trend.
System Icons (12)
Home, Marine Mode, Land Mode, Settings, WiFi, Bluetooth, GPS, Battery, Charging, Menu, Back, Refresh.
8. Deliverables Checklist
• PNG (32-bit RGBA) for all icons
• SVG for all icons
• All required sizes (128, 96, 64, 32 px)
• Transparent backgrounds
• Correct folder structure
• Correct naming conventions
• Consistent stroke width
• Consistent color palette
• Preview sheet showing all icons together
Acceptance criteria
Icons render cleanly at intended size, maintain legibility in direct sunlight, and remain visually balanced whether the interface is in Marine or Land mode.
If you enjoy balancing aesthetics with hard technical limits, this should be a fun challenge.