Compass
On this pageUse in components
  1. Use in components
  2. Add a new icon
  3. Use in MDX

Components

Local Icons

Use the bundled Lucide icons, or add your own SVGs, without a runtime icon dependency.

1 min readUpdated

Compass keeps every icon local. There is no icon font and no icon package to install, so icons render as inline SVG and inherit the surrounding text color.

Use in components

The Icon component in src/components/ui/Icon.astro renders any SVG from src/icons by its file name:

---
import Icon from '@/components/ui/Icon.astro';
---

<Icon name="rocket" class="size-5" />
<Icon name="social-github" class="size-4" />
  • outline icons come from src/icons/lucide and are addressed by file name, such as rocket or book-open
  • filled brand marks come from src/icons/bootstrap and are addressed as social-<file name>
  • size and color come from the class you pass, so size-5 text-accent works as expected

Category icons in src/config/docs.ts use the same names, so the homepage cards, the sidebar, and the mobile menu pick them up automatically.

Add a new icon

  1. Copy the SVG for the icon you want from Lucide.
  2. Save it in src/icons/lucide with the icon’s name as the file name, such as map.svg.
  3. Reference it with <Icon name="map" /> or set icon: 'map' on a category.

Unknown names fall back to the link icon, so a typo shows up as a visible placeholder instead of breaking the build.

Use in MDX

For a one-off icon inside an article, paste the SVG inline:

<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
  <path d="M12 5v14M5 12h14" />
</svg>

To make Icon available in every article without an import, register it in src/components/docs/mdx-components.ts.