Icons
The full Lucide set (ISC)
ships as generated per-icon Svelte components: 1748 icons from
Lucide v1.25.0. Each one is decorative by default, and labeled when you pass ariaLabel.
Brand marks are not included. Every icon-accepting component takes a snippet, so bring your own:
an inline SVG, an icon font glyph, or a package like simple-icons. You pass one of
those the same way you pass a Lucide icon.
Import
Import from the barrel (@hyzer-labs/ui/icons) for zero config: your bundler
tree-shakes the rest away. Use a deep import (@hyzer-labs/ui/icons/<name>)
to skip the barrel, which keeps a dev server's module graph small. Or declare an icons: [...] list in hyzer.config.ts and run hyzer generate for a curated, project-local
barrel. See Config & CLI.
import { IconCheck } from '@hyzer-labs/ui/icons';
// or skip the barrel with a deep import
import IconCheck from '@hyzer-labs/ui/icons/check';Demo
<IconCheck size={24} strokeWidth={2} />intent colors the glyph from the shared vocabulary (color: var(--hz-intent-*)). See Foundation → Colors & Intent. class is a separate hook, yours to style.
neutralprimarysecondarydangerwarningsuccessinfoclass="…"<IconSettings intent="neutral" />
<IconRocket intent="primary" />
<IconSparkles intent="secondary" />
<IconOctagonAlert intent="danger" />
<IconTriangleAlert intent="warning" />
<IconCircleCheck intent="success" />
<IconInfo intent="info" />
<!-- or bring your own class -->
<IconCheck class="my-tint" />Without ariaLabel, an icon is decorative: it gets aria-hidden="true", and assistive tech skips it. With one, the svg
carries an accessible name.
<IconSearch /> <!-- no ariaLabel: decorative, aria-hidden="true" -->
<IconSearch ariaLabel="Search" /> <!-- labeled: carries an accessible name -->Props
Every icon in the library shares the same interface. Anything else you pass goes straight to
the svg root.
| Name | Type | Default | Note |
|---|---|---|---|
size | number | 24 | Width and height in px. |
strokeWidth | number | 2 | |
intent | Intent | — | Colors the glyph from the shared intent vocabulary. |
ariaLabel | string | — | Absent or empty means decorative, so the icon gets aria-hidden="true". |
class | string | — | Merged after the hz-icon class. |
Core icons
These 14 icons, marked core , ship in every hyzer generate barrel no matter what your icons config says, even icons: []. They
are the glyphs this library's own components render internally: the chevrons, close, menu,
search, and so on. Trimming your icon vocabulary can never break a component you are already
using.
Browse & search
1748 of 1748 icons shown