Brand logos

The icon of a feature in sitekit.config.json is a lucide name, and lucide has no brand logos. A logo is written as brand:<slug> instead:

{
  "features": [
    {
      "icon": "brand:github",
      "eyebrow": "Source",
      "title": "On GitHub",
      "text": "The code is public."
    }
  ]
}

The same value works wherever the kit takes an icon: the features of the config, the name of the Icon component, FeatureGrid, and the icon of a footer link in SiteFooter.

A logo is drawn as an inline SVG, filled with currentColor. It takes the color of the text around it, and the hover color of a link it is in. It is monochrome on purpose, the kit does not use brand colors. The page asks no host for it: the path data is part of the site, and the generated site has no new dependency.

The brands that ship

The slug is the one Simple Icons uses, so Next.js is nextdotjs. A slug that does not exist fails the build, names the slug, and suggests the closest ones:

features.0.icon: Unknown brand "nextjs". Did you mean brand:nextdotjs (Next.js)? A logo that does not ship can be added as "brand:custom/<name>".

The repository button

When site.repository is set, the header shows a button with the logo of the host and its name, and the footer has the same link in the Project column. The kit has the logos of GitHub and GitLab. For any other host the button says “Repository” and uses a plain icon.

The button is 44 px tall. On a phone it moves into the open menu, because the bar has no room for it, and keeps the 44 px target there. The footer link is 44 px tall on a phone too.

Your own logo

For a brand the kit does not ship, add an SVG file to a brands folder next to sitekit.config.json, and use it as brand:custom/<name>:

site/
  sitekit.config.json
  brands/
    acme.svg

{ "icon": "brand:custom/acme" }

The name is the file name without .svg, in lowercase letters, digits and hyphens. A name with no file fails the build and lists the files that are there. sitekit check reads the folder too.

The file is read as data, not copied. The kit keeps the viewBox and the d of each <path>, and refuses the rest, with the file named in the message:

• Only <svg>, <path>, <g>, <title> and <desc> are allowed. Convert other shapes to paths in your design tool. This also keeps scripts and external references out of a logo.
• A path with a stroke, or with fill="none", is refused. Convert strokes to outlines.
• A transform is refused. Apply it in your design tool so the path data is final.
• The file needs a viewBox, and it must be 20 KB or less.

Colors in the file are ignored, the logo is drawn in the text color. You are responsible for the right to use the logo and for following its owner’s guidelines.

Which brands are not shipped, and why

• AWS. Its logo is governed by the AWS trademark guidelines and the Architecture Icons terms, and Simple Icons does not carry it. The kit ships no AWS mark. Download the official files from the AWS Architecture Icons page and add the one you need as a custom logo.
• LinkedIn, Playwright and Visual Studio Code. They are not in Simple Icons 16.36.0, the version the kit reads. Use a custom logo from the owner’s brand page.
• PHP. The logo is released by its author under CC BY-SA 4.0 (php.net/download-logos), not CC0, so it is out of the default set.

The licence gate

The kit does not ship a logo on the memory of anyone about its licence. npm run build:brands in the repository of the kit reads the pinned simple-icons package (version 16.36.0, exact, a development dependency of the kit only) and writes template/src/domain/brands/brand-data.ts, with the licence of each icon. The list of brands is scripts/brands/curated.json.

• Simple Icons is CC0, and an icon that has its own licence says so in its license field. An icon whose licence is not CC0 fails the script.
• The way out is an entry in scripts/brands/allowlist.json, with the license, the author and the attribution text. The entry must name the same licence the icon has. Then the attribution is written to the module and to THIRD_PARTY_NOTICES.md.
• The script rewrites only the block between two markers of THIRD_PARTY_NOTICES.md, so a re-run leaves no diff. npm run build:brands -- --check fails when the module or the notices are out of date.

To add a brand to the kit, add its slug to curated.json and run npm run build:brands. Moving to a newer Simple Icons means changing the pinned version on purpose, never latest, because a moving version changes what the kit ships between two builds.

The marks belong to their owners. Showing one names the product or service and does not mean the owner endorses the site. Check the guidelines of a brand before you use its logo, the module keeps the guidelines link where Simple Icons has one.