Icons

Use Lucide for generic interface icons and keep brand marks local to the feature that owns them. This keeps icon naming predictable without treating trademarks as generic UI symbols.

Use lucide-react for icons such as search, theme controls, and close buttons in Blackwork apps.

TSX

import { Moon, Search, Sun } from 'lucide-react'

export const SearchMark = () => {
  return <Search className="size-4" />
}

If lucide-react is not installed in the project, add it first:

Bash

pnpm add lucide-react

Brand marks

Lucide 1.x does not include trademark logos. Keep GitHub, X, Zhihu, npm, and similar marks as local SVGs next to the feature that needs them. Blackwork does this internally for SocialLink only. See Widgets.

Common names

The blackwork/icons entry has been removed. When updating older imports, use these Lucide names:

Previous name	Lucide
`Close`	`X`
`Language`	`Languages`
`Toc`	`TableOfContents`
`Loader`	`Loader2`

For the other steps in upgrading an existing app, see the migration guide.