Icons, Images & Logos

Kivo Theme Documentation

Folder: src/assets/images/ · Skill level: Beginner

Icons

Wherever a content file has an icon: field (menus, features, buttons, cards, badges), you can write any icon name from Lucide, a free set of 1,500+ icons:

icon: "Rocket"        # or "rocket"
icon: "Building2"     # or "building-2"

Find an icon on lucide.dev/icons.
Copy its name. Both Building2 and building-2 work.
Paste it as the icon value.

Icons are drawn as inline SVG when the site is built, so they cost no extra downloads and follow the text color, including in dark mode.

Some fields also accept your own SVG file instead of a name, for example icon: "/images/icons/github.svg" in proof badges, team member links, and social links. Brand icons such as GitHub, GitLab, Google, Discord, and the social networks are in src/assets/images/icons/.

Images

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

image: "/images/blog/my-post.jpg"   # the file is src/assets/images/blog/my-post.jpg

Kivo 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`, `logo`, `icon`, lists in section files)	Images inside Markdown text (`![alt](/images/...)`), videos, PDFs, the generated favicons and social image
Optimized at build time	Copied as they are

Recommended Sizes

Image	Size	Notes
Blog post image (`image`)	1600×900 (16:9)	Also used as the social preview of the post
Social preview (`[opengraph] image`)	1200×630	Or let Kivo draw one per page
Team portrait	Square, at least 600×600	Shown in grayscale on the grid, in color on hover
Customer logos (`clients.md`)	SVG, about 130×32	Single color, dark on transparent
Hero screenshot (`screenshot` layout)	2400 px wide or more	Shown in a browser frame
Favicon source	Square SVG, or PNG ≥ 512×512	See Site Identity

Logos Of Your Customers

The logo strip under the hero and on several pages comes from src/content/sections/english/clients.md:

list:
  - alt: "Northstar Systems logo"
    src: "/images/clients/1.svg"

Use single-color, dark SVG logos on a transparent background. Kivo inverts them in dark mode, so a dark logo becomes white automatically. Colored logos will look wrong in dark mode. The homepage has its own list in the clientsSection block of src/content/homepage/english/-index.md.

Integration logos (logo in src/content/integrations/) work differently: they are inlined and drawn in the text color, so they also need to be single-color SVGs.

Alt Text

Most image fields have an alt or imageAlt next to them. Describe what the image shows (“Dashboard showing deploy history”), not “image of…”. Screen readers and search engines read it.