# 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 (trades, steps, values, facts in the trust strip, menu links), you can write any icon name from [Lucide](https://lucide.dev/icons/), a free set of more than 1,500 icons:

```yaml
icon: "SprayCan"
icon: "Wrench"
```

1. Find an icon on [lucide.dev/icons](https://lucide.dev/icons/).
2. Copy its name. `spray-can` as written on the Lucide site works, and so does the PascalCase form `"SprayCan"`, which the theme files use.
3. Paste it as the `icon` value.

Every Lucide icon is drawn as inline SVG when the site is built (`src/lib/lucideIcons.ts`), so icons load with the page and follow the text colour. A name that Lucide doesn't know draws no icon, and the browser console shows a warning such as `Lucide icon "Sprycan" not found.`: check new icons on the page.

An `icon` value that contains a `/` or a `.` is read as an image path instead, for example `icon: "/images/icons/my-badge.svg"` (a file in `src/assets/images/icons/`). Use it for your own SVG marks.

<Aside type="tip" title="For developers">
  In components, use `<DynamicIcon name="Wrench" class="size-5" />`
  (`src/layouts/helpers/DynamicIcon.astro`), which takes a Lucide name or an
  image path, or `<Icons icon="Wrench" />` (`src/layouts/helpers/Icons.astro`)
  for Lucide only. Adding a name to `src/lib/iconNames.ts` gives editor
  autocomplete; it is optional.
</Aside>

### Where Images Live
| Folder | What goes there | How to write the path |
| --- | --- | --- |
| `src/assets/images/` | Every photo in the content: heroes, services, areas, projects, team, blog | `"/images/services/deep-clean.jpg"` for `src/assets/images/services/deep-clean.jpg` |
| `public/images/` | Files served as they are: favicons, the fallback social image `og-image.jpg`, and the `gallery/` sample | `/images/og-image.jpg` |
| `public/videos/` | Self-hosted videos | `/videos/my-video.mp4` |

Images in `src/assets/images/` are optimized when the site is built: resized for each screen, converted to modern formats, and lazy-loaded. Always put your photos there unless a setting says `public/`.

`src/assets/images/README.md` lists the sample photo folders and the shape each one needs:

| Folder | Shape |
| --- | --- |
| `heroes/` | 4:5 or 16:9, depending on the hero layout |
| `services/` | 4:5 (cropped to 1:1 on some cards) |
| `projects/` | 3:2 (the slider frame; 4:3 also works), in `-before.jpg` / `-after.jpg` pairs |
| `areas/` | 16:9 street or houses, no people |
| `industries/` | 4:3 |
| `blog/` | 3:2, no readable text |
| `steps/`, `how-it-works/`, `about/`, `careers/`, `people/` | Mostly 4:5; the README lists each file |

### Replace A Sample Photo
<Steps>

1. Put your photo in the matching folder of `src/assets/images/`, for example `src/assets/images/services/my-deep-clean.jpg`. A large JPG (about 2000 px wide) is fine: the build makes the smaller sizes.

2. In the content file that uses the old photo, change the path and describe the new photo:

   ```yaml
   image: "/images/services/my-deep-clean.jpg"
   imageAlt: "A crew member wiping a kitchen counter"
   ```

3. Make the same change in the `french/` file (with the alt text in French).

</Steps>

Or keep the file name and replace the file itself: every page that uses it changes at once.

To find which file uses a photo, search the project for its file name, for example `deep-clean.jpg`.

### Alt Text
Every photo field has a matching alt field: `imageAlt`, `alt`, `heroImageAlt`, `beforeAlt` and `afterAlt` on projects, `imageAlt` on posts. Screen readers read it, and search engines use it.

- Describe what the photo shows, in one short sentence: "A crew member wiping a kitchen counter".
- Don't start with "Image of", and don't repeat the caption.
- Leave it empty (`""`) only for a purely decorative photo.

### Dark Mode Images
A page's `image` can have a dark mode version in `imageDark`. In components, `OptimizedImage` takes `darkSrc` for the same purpose. Client logos are drawn as dark artwork and inverted in dark mode automatically, so use single-colour SVG logos in `src/assets/images/clients/`.

### Photo Rules For A Trust-Based Business
- **No placeholder faces.** Team cards, reviews, and the author box show no avatar when there is no photo. Add real portraits of your own crew (4:5), with their consent, or leave them out.
- **Real before/after pairs.** Several sample "before" photos in `projects/` are dulled copies of the "after" photo. Replace each pair with two photos of the same job.
- **Your own work.** Photos of your crews, vans, and finished rooms build more trust than stock photos.

### Photo Credits And Licences
`IMAGE-CREDITS.md` at the root of the theme lists every sample photo: its file, source, author, licence, and the edits made. The sample photos come from Unsplash (Unsplash License) or Pixabay (Pixabay Content License). Both allow commercial use without attribution, but not selling or redistributing a photo on its own; keep them inside your site.

Replace the sample photos with your own before you launch. When you replace one, you can remove its row from `IMAGE-CREDITS.md`.

<Aside type="note">
  Logos and favicons are covered in [Site Identity & Logo](/homio/customization/site-identity-logo/).
  The social preview image is in [SEO & AI Visibility](/homio/customization/seo-ai-visibility/#social-preview-cards).
</Aside>

### Do It With AI
```text
I added my photos to src/assets/images/[FOLDER]/: [LIST FILES AND WHAT EACH SHOWS]. Replace the
sample photos with them in the matching content files (english and french): change the image path
and write a short, specific alt text in each language. Keep the shapes listed in
src/assets/images/README.md, and tell me which sample photos are still in use.
```