Icon System
Google Material Symbols styled in ERS Energy color scheme
Overview
The ERS icon system uses Google Material Symbols with a thin weight (260) for a refined, modern appearance. Icons are styled monochromatically using our brand color palette.
Specifications
| Property | Value | Notes |
|---|---|---|
| Icon Font | Material Symbols Outlined | Google Fonts |
| Weight | 260 (thin) | 35% lighter than default |
| Sizes | 16, 20, 24, 32, 48, 64px | 24px default |
| Style | Monochromatic | Single color from palette |
Design Showcase
Steal this design using our icon generators below. This solar dashboard demonstrates how ERS icons and colors work together in real applications.
Generation
kWh
kWh
kWh
kWh
Billing
RM
RM
Years
Environmental impact
Monochrome Teal Generator
Create teal-themed icons for environmental, sustainability, and general content.
Select Icon
Search for icons by name. Can’t find one? Browse Google Material Icons and paste the icon name here.
Size
Sizes 128px and above are HD — ideal for presentation slides.
Background Color
Icon Color
Preview
Monochrome Orange Generator
Create orange-themed icons for calls-to-action, highlights, and energy-related content.
Select Icon
Search for icons by name. Can’t find one? Browse Google Material Icons and paste the icon name here.
Size
Sizes 128px and above are HD — ideal for presentation slides.
Background Color
Icon Color
Preview
Monochrome Dark Generator
Create neutral dark-themed icons for general UI elements and navigation.
Select Icon
Search for icons by name. Can’t find one? Browse Google Material Icons and paste the icon name here.
Size
Sizes 128px and above are HD — ideal for presentation slides.
Background Color
Icon Color
Preview
Inverted Generator
White icons on solid color backgrounds for high-contrast buttons and badges.
Select Icon
Search for icons by name. Can’t find one? Browse Google Material Icons and paste the icon name here.
Size
Sizes 128px and above are HD — ideal for presentation slides.
Background Color
Preview
Mixed Colors Generator
Combine different brand colors for icon and background. Great for buttons and callouts.
Select Icon
Search for icons by name. Can’t find one? Browse Google Material Icons and paste the icon name here.
Size
Sizes 128px and above are HD — ideal for presentation slides.
Background Color
Icon Color
Preview
Icon Reference
Curated icons recommended for ERS Energy applications.
Energy & Solar
Actions & Documents
Usage Guide
How to implement icons in your projects.
HTML Setup
Add the Material Symbols font with thin weight (260) to your HTML head:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@260" rel="stylesheet>
Use icons in your HTML:
<span class="material-symbols-outlined">solar_power</span>
Apply ERS colors via CSS:
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 260, 'GRAD' 0, 'opsz' 24;
color: var(--teal-11); /* Or any ERS color variable */
}