Icons

Components•2 min read||

DocsLit includes a set of built-in Lucide icons and supports the full Font Awesome library as a fallback.

Using icons

<wc-icon name="zap"></wc-icon> <wc-icon name="book"></wc-icon> <wc-icon name="search"></wc-icon> <wc-icon name="settings"></wc-icon> <wc-icon name="globe"></wc-icon>

Built-in icons

The following Lucide icons are included and load instantly with no external requests:

  • zap
  • book
  • search
  • settings
  • globe
  • code
  • terminal
  • file
  • folder
  • package
  • blocks
  • palette
  • eye
  • lock
  • unlock
  • check
  • x
  • plus
  • minus
  • arrow-right
  • arrow-left
  • arrow-up
  • arrow-down
  • external-link
  • copy
  • download
  • upload
  • warning
  • info
  • heart

Font Awesome fallback

If you use an icon name that is not in the built-in set, DocsLit automatically loads it from Font Awesome (v6.7.2):

<wc-icon name="fa-brands fa-github"></wc-icon> <wc-icon name="fa-brands fa-docker"></wc-icon> Font Awesome icons load from the CDN on first use. Built-in Lucide icons render immediately with no network request.

Icons in other components

Many components accept an icon-name attribute:

<wc-card icon-name="zap" title="Fast builds" href="deployment/static-hosting"> Build your entire docs site in seconds. </wc-card> <wc-tile icon-name="search" title="Search" description="Built-in full-text search."></wc-tile> <wc-panel icon="settings" title="Configuration"> Configure your project with docslit.json. </wc-panel> The icon name. Use a built-in Lucide name or a Font Awesome class like fa-brands fa-github.