Icons

Praesepe ships a small operational icon set as inline Blade SVGs under resources/views/components/icons. It is not an icon foundry. For product icons beyond this set, use whatever pack you prefer.

Built-in set

18 icons used by docs chrome and UI primitives. Click a card to copy the Blade tag.

Usage

Prefer long-form sizing with size-* and shrink-0 inside flex rows. Optical defaults: size-3.5 in sm controls, size-4 in md.

<x-ui.button size="sm">
    <x-icons.search class="size-3.5 shrink-0" />
    Search
</x-ui.button>

<x-ui.input name="q" placeholder="Find invoices">
    <x-slot:leadingIcon>
        <x-icons.search class="size-4 shrink-0" />
    </x-slot:leadingIcon>
</x-ui.input>

Bring your own

Praesepe does not depend on an icon package. Drop any SVG into a slot, or install a pack in your app. Common choices: Heroicons, Lucide, Phosphor, or hand-authored marks.

• Pass custom SVG through named slots such as leadingIcon, icon, or button children.
• Keep stroke icons around 1.5 to 2px so they match control density.
• Use currentColor so icons follow text-* utilities.
• If you standardize on Heroicons, copy only the glyphs you need into your app. Do not add a Heroicons package to Praesepe itself.

<!-- Example: Heroicons-style path pasted into a control -->
<x-ui.button variant="outline" size="sm">
    <svg class="size-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
    </svg>
    New invoice
</x-ui.button>

Accessibility

• Decorative icons default to aria-hidden="true".
• Icon-only controls need an accessible name on the button or link (aria-label).
• Do not rely on color alone. Pair status icons with text labels in tables and alerts when meaning matters.