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, a free set of more than 1,500 icons:

icon: "SprayCan"
icon: "Wrench"

1. Find an icon on 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.

Where Images Live

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:

Replace A Sample Photo

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:

   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).

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.

Do It With AI

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.