Icon

A lucide icon by its kebab-case name, or a brand logo as brand:<slug>.

Preview

src/examples/icon/example.astro

---
import { Icon } from "@/presentation/components/site/icon";
---

<div class="flex items-center gap-4 text-brand">
  <Icon name="shield-check" size={32} />
  <Icon name="layers" size={32} />
  <Icon name="zap" size={32} />
</div>

Add to your site

npx docs-sitekit add icon

It writes these files, and keeps a file you changed:

src/presentation/components/site/icon.tsx
src/domain/brands/index.ts
src/domain/brands/brand.ts
src/domain/brands/brand-data.ts
src/domain/brands/icons.ts
src/domain/brands/custom-svg.ts

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of Icon
Key	Type	Default	Allowed values	Description
`name`	string	required	-	A lucide icon in kebab-case, brand:<slug> for a logo that ships, or brand:custom/<name> for your own.
`label`	string	-	-	Give the icon a name when it stands alone. The icon then has role="img" and that name, and a brand logo also carries it as a <title>, which a browser shows on hover. Without it the icon is decorative and hidden from assistive technology, because the text next to it already names the brand.
`brands`	Record<string, BrandGlyph>	-	-	The custom logos of the site, by icon value. The page passes them in: the component reads no files.

Variants and states

A brand logo

brand:<slug> draws one of the logos the kit ships, as an inline SVG in the color of the text.

src/examples/icon/brand.astro

---
import { Icon } from "@/presentation/components/site/icon";
---

<div class="flex items-center gap-4 text-fg-bright">
  <Icon name="brand:github" size={32} />
  <Icon name="brand:astro" size={32} />
  <Icon name="brand:typescript" size={32} />
</div>

With a name

An icon that stands alone gets a label, and then it has a role and a name.

src/examples/icon/label.astro

---
import { Icon } from "@/presentation/components/site/icon";
---

<Icon name="brand:github" label="GitHub" size={32} className="text-fg-bright" />

A name that does not exist

A name that resolves to nothing draws a plain circle.

src/examples/icon/unknown.astro

---
import { Icon } from "@/presentation/components/site/icon";
---

<Icon name="no-such-icon" size={32} className="text-fg-muted" />

About

An icon from lucide-react by its name in kebab-case, such as shield-check, or a brand logo as brand:<slug>, such as brand:github. A logo is an inline SVG filled with currentColor, so it takes the color of the text and asks nothing from any host. The logos the kit ships, and how to add your own, are in Brand logos.

Accessibility

An icon is decorative by default: it has aria-hidden="true", because the text next to it already names what it shows.
With label, the icon has role="img" and that name. A brand logo also carries it as a <title>, which a browser shows on hover.
A brand logo has focusable="false", so an old browser does not put the SVG in the tab order.
A name that resolves to nothing draws a plain circle, hidden from assistive technology like any other decorative icon.

Source

Edit this page

Last updated 5 November 2026