Icons & Images

Icons & Images

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

Icons

Every icon field in Taskly takes a Lucide icon name, in either form:

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

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/:

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 Insrc/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:

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

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