docmd comes with built-in support for the Lucide icon library. Icons can be used in your navigation sidebar, buttons, and custom components to provide visual cues and improve scannability.

Navigation Icons

Assign an icon to any navigation item in your docmd.config.js. Use the kebab-case name of any icon found on the Lucide website.

navigation: [
  { title: 'Home', path: '/', icon: 'home' },
  { title: 'Setup', path: '/setup', icon: 'settings' }
]

Icons in Containers

You can also use icons inside your buttons, tags, tabs, and other containers by including the raw HTML or using standard icon: prefix across docmd.

::: button "Download" /download icon:download

CSS Styling

All icons are rendered as inline SVGs with the class .lucide-icon. You can globally change their size or stroke weight in your customCss:

.lucide-icon {
  stroke-width: 1.5px; /* Thinner icons for a modern look */
  width: 1.2rem;
  height: 1.2rem;
}

/* Target a specific icon */
.icon-rocket {
  color: #ff5733;
}

Icon Reference

We support the entire Lucide library. You can browse the thousands of available icons here:

Browse Lucide Icons