# Icons & Images

## Icons & Images

**Files:** `src/assets/images/`, `public/images/`, content files · **Skill level:** Beginner

### Icons
Every `icon` field in Taskly takes a [Lucide](https://lucide.dev/icons/) icon name, in either form:

```yaml
icon: "CalendarCheck"     # or "calendar-check"
```

All 1,500+ Lucide icons work. They are drawn as inline SVG at build time, so no icon font or script loads in the browser. Many `icon` fields also accept an image path instead, for example `icon: "/images/icons/github.svg"` for a brand logo that Lucide doesn't have.

Icons sit on a pastel tile whose color comes from the item's `color` field (`sun | lime | sky | lilac | orchid | mint | lemon | white | cream`).

<Aside type="tip">
  Developers: `src/lib/iconNames.ts` lists known names for editor
  autocomplete. Adding a name there is optional; any Lucide name renders.
</Aside>

### Images In Content Files
Fields such as `image`, `avatar`, `src`, and `logos` take a path that starts with `/images/`. Taskly looks for the file in `src/assets/images/` first, then in `public/images/`:

| Path in the content file      | File on disk                              |
| ----------------------------- | ----------------------------------------- |
| `/images/team/8.png`          | `src/assets/images/team/8.png`            |
| `/images/clients/3.svg`       | `src/assets/images/clients/3.svg`         |
| `/images/blog/two-lists.svg`  | `src/assets/images/blog/two-lists.svg`    |

Images in `src/assets/images/` are resized, converted to modern formats, and lazy-loaded at build time, so you can drop in a large photo. Use local files: remote image URLs are not supported in these fields.

### What Ships In `src/assets/images/`
- `team/`: sample avatars and team photos (used by reviews, comment pins, the dashboard, the team section, authors)
- `clients/`: sample customer logos for the logo strip
- `blog/`: blog covers (illustrations)
- `icons/`: social and brand icons
- `logo.svg`, `favicon.svg`: the brand mark

The people and customer logos are samples: replace them with your own, or remove them if you have none.

### Images In Markdown Bodies
`![Alt text](/images/gallery/1.jpg)` in the body of a post or page is served from `public/`: put the file at `public/images/gallery/1.jpg`.

### Customer Logos
The logo strip reads `logos` in `logos-section.md`:

```yaml
logos:
  - { src: "/images/clients/1.svg", alt: "Company name" }
```

SVG logos work best. The `band` layout shows the logos in white on a dark band, so single-color SVGs look most even. Write the company name in `alt`.

### Product Screens
Taskly's product visuals (dashboard, calendar, chat, task cards, template previews) are coded, not images. To show your real product instead, use an `image` visual where a section offers one (for example `pageHeader.visual` with `type: "image"`), or replace the mockup in the section component.

### Do It With AI
```text
Replace the customer logos in src/content/sections/english/logos-section.md (and french/) with
my files in src/assets/images/clients/: [FILES AND COMPANY NAMES]. Then replace the avatars in
the reviews of testimonials-section.md with [FILES], keeping names and roles I give you: [LIST].
```