# Icons, Images & Photo Credits

## 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](https://lucide.dev/icons/), a free set of 1,500+ icons:

```yaml
icon: "BatteryCharging"
icon: "Building2"
```

1. Find an icon on [lucide.dev/icons](https://lucide.dev/icons/).
2. 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"`.
3. 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.

<Aside type="tip">
  Developers: `<Icons icon="House" />` (`src/layouts/helpers/Icons.astro`)
  renders any Lucide icon. A few icons that appear on every page are drawn at
  build time instead; you can add more to its `iconMap`.
</Aside>

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

```yaml
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](/ecozen/customization/site-identity-logo/) |

### Photo Credits And Replacing The Demo Photos
The 38 photos in `src/assets/images/photos/` are free stock photos: 30 from [Unsplash](https://unsplash.com/license) and 8 from [Pexels](https://www.pexels.com/license/). 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.

<Steps>

1. Take or collect photos of your own work, at least as large as the sizes above.
2. Save them in `src/assets/images/photos/` (or a folder of your own).
3. 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).
4. Update the `imageAlt` text next to each path.
5. Delete the old files once nothing points to them.

</Steps>

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:

```yaml
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.