Icons, Images & Photo Credits

Folder: src/assets/images/ · Skill level: Beginner

Icons

Wherever a content or menu file has an icon: field (services, features, benefits, values, contact details, menu links), you can write any icon name from Lucide, a free set of 1,500+ icons:

icon: "BatteryCharging"
icon: "Building2"

Find an icon on lucide.dev/icons.
Write its name in PascalCase: each word starts with a capital, with no spaces or dashes. battery-charging on the Lucide site is "BatteryCharging", and building-2 is "Building2".
Paste it as the icon value.

Icons follow the text color. Most of them are drawn in the browser by a small script once the page loads. A name that doesn’t exist shows a placeholder and a warning in the browser console, so check new icons on the page.

Images

Put images in src/assets/images/ (in any subfolder) and refer to them with a path that starts with /images/:

image: "/images/photos/my-roof.jpg"   # the file is src/assets/images/photos/my-roof.jpg

Ecozen resizes and compresses these images at build time and serves modern formats, so you can upload good-quality originals.

Use `src/assets/images/` for…	Use `public/` for…
Images set in frontmatter fields (`image`, `headerImage`, `logo`, photos in section files and menus)	Images inside Markdown text (`![alt](/images/...)`), videos, PDFs, the generated favicons, and the social image
Optimized at build time	Copied as they are

Recommended Sizes

The demo photos give a good guide:

Image	Size (demo)	Notes
Hero photo (`hero-section.md`)	2400×1350, landscape	Keep the left side calm: the headline sits on it
Photo bands (services band, call to action)	2400×1400 or 2000×1125	Shown full width behind text
Service photo (`image` in a service)	1200×900 (4:3) or larger	Shown on cards and at the top of the service page
Project photo (`image` in a project)	1600×1067 (3:2)	Also the photo in the project page header
Blog post image	1600×1000	Also the post’s social preview
“Why choose us” cards	800×1000, portrait
Team portrait	450×500	Use the same size and background for everyone
Social preview (`[opengraph] image`)	1200×630
Favicon source	Square SVG, or PNG ≥ 512×512	See Site Identity

Photo Credits And Replacing The Demo Photos

The 38 photos in src/assets/images/photos/ are free stock photos: 30 from Unsplash and 8 from Pexels. Each file name says where it comes from and its photo ID, for example hero-unsplash-IwY-27ceRCA.jpg is Unsplash photo IwY-27ceRCA, at https://unsplash.com/photos/IwY-27ceRCA.

Both licences allow free commercial use without attribution. They don’t allow selling the photos themselves unchanged, and the Pexels licence also doesn’t allow implying that people shown endorse your business. Read the current terms on each site before you use a photo.

Replace the demo photos before you launch, for two reasons:

They are stock photos of other people’s roofs and fields. Visitors deciding on a solar installer want to see your crews and your installs, and a photo of a sample project presented as your work is misleading.
Other sites built with Ecozen show the same photos.

Take or collect photos of your own work, at least as large as the sizes above.
Save them in src/assets/images/photos/ (or a folder of your own).
Search the project for the old file name, for example hero-unsplash-IwY-27ceRCA.jpg, and replace each path, in every language folder and every src/config/menu.*.json file (the Services mega menu card has a photo).
Update the imageAlt text next to each path.
Delete the old files once nothing points to them.

The five team portraits in src/assets/images/team/ are samples too: replace them with your own team.

Logo Strip

The strip under the hero (logo-strip-section.md) shows text wordmarks with a Lucide icon, not image logos:

list:
  - icon: "Leaf"
    name: "Brightfield"

The names are invented samples. Replace them with real clients or partners who agreed to be named, or set enable: false.

Alt Text

Most image fields have an imageAlt or headerImageAlt next to them. Describe what the image shows (“Two installers fitting panels on a pitched roof”), not “image of…”. Screen readers and search engines read it.