Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-icon

Stroke-icon container. Slot in any SVG that uses currentColor. Size presets align with the icon-sm/md/lg tokens (16 / 20 / 24px).

Examples API Intent Changelog
<body> <hp-icon size="sm"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"> <polygon points="12,2 21,7 21,17 12,22 3,17 3,7"></polygon> </svg> </hp-icon> <hp-icon> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"> <polygon points="12,2 21,7 21,17 12,22 3,17 3,7"></polygon> <circle cx="12" cy="12" r="3"></circle> </svg> </hp-icon> <hp-icon size="lg"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"> <line x1="12" y1="2" x2="12" y2="22"></line> <line x1="2" y1="12" x2="22" y2="12"></line> <polygon points="12,2 21,7 21,17 12,22 3,17 3,7"></polygon> </svg> </hp-icon> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
size size "sm" | "md" | "lg" "md" Icon size — `sm` (16px), `md` (default, 20px), or `lg` (24px).

Slots

Slot Description
(default) SVG content (stroke-based icon)

When to use

Wrap stroke icons (Lucide-style) in <hp-icon> when sizing needs to align with the system's icon-sm/md/lg tokens — inside an <hp-cell variant="utility">, next to a label in a toned <hp-cell>, or as a section glyph. Author your SVG with stroke="currentColor" so the icon picks up the containing scope's colour — including hover swaps from the parent atom. Use <hp-icon> for pixel-art / sprite work — that's <hp-pixel>'s territory (box-shadow grid, state morphing). Slot a coloured / filled SVG. The icon container assumes currentColor inheritance; hardcoded colours break theme switching and hover hue swaps.

Lucide-mirrored icons

@hexpunk/core/icons mirrors selected Lucide icons (ISC licensed) as named string exports — the inner SVG content without the outer <svg> wrapper. Inline the path data into your own <svg> for static HTML, or import the string and bind via set:html (Astro) / dangerouslySetInnerHTML (React) / innerHTML (vanilla):

// src/icons/scan.ts ships as: // export const scan = '<path d="..." /> <path d="..." /> ...'; import { scan } from "@hexpunk/core/icons"; // Astro: // <svg ...><Fragment set:html={scan} /></svg> // // React: // <svg ... dangerouslySetInnerHTML={{ __html: scan }} /> // // Vanilla / Lit: // svg.innerHTML = scan;

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close