DhIcon
Inline SVG icon from the Lucide set (lucide.dev). currentColor tinting; preset sizes 16/20/24/32 plus arbitrary CSS lengths.
Pass any Lucide kebab-case name to <DhIcon name="..." /> — all 1960 ship with
the package. The examples below cover sizing, accessibility, stroke weight, and color; the full
searchable catalog sits at the bottom of the page.
Sizes
Preset class-based sizes 16/20/24/32 produce no inline style attribute, so apps running under a strict CSP don't need style-src 'unsafe-inline'. Other sizes fall through to a single CSS variable in style — set --dh-icon-size from your own stylesheet to stay CSP-clean.
<DhIcon name="search" size={16} />
<DhIcon name="search" size={20} />
<DhIcon name="search" size={24} />
<DhIcon name="search" size={32} />
<DhIcon name="search" size={48} />
<DhIcon name="search" size="3rem" />Bounding box
The wrapper enforces a square box matching the chosen size. The inner SVG centers on both axes and preserves its aspect ratio — Lucide ships every glyph as a 24×24 viewBox so a non-square render is impossible.
<!-- All four wrappers are perfect squares; the glyph fits inside. -->
<DhIcon name="square" size={32} />
<DhIcon name="circle" size={32} />
<DhIcon name="triangle" size={32} />
<DhIcon name="hexagon" size={32} />Accessibility
Pass ariaLabel for a meaningful icon (icon-only button, status indicator). Pass decorative=true when the surrounding text already conveys the meaning, so screen readers don't double-announce.
decorative<!-- Labelled: an icon-only button that needs to announce its purpose. -->
<DhIcon name="trash-2" ariaLabel="Delete attachment" />
<!-- Decorative: paired with text that already conveys meaning. -->
<DhButton startIcon="plus" text="Add file" />
<!-- The icon inside the button passes decorative={true} so screen
readers don't announce it on top of "Add file". -->Stroke weight
The default matches Lucide's design at stroke-width 2. Override via --dh-icon-stroke-width on any ancestor to thin or bolden icons in a contained subtree. Use sparingly — drifting stroke weights across the app breaks visual coherence.
<div style="--dh-icon-stroke-width: 1.25">
<DhIcon name="sparkles" />
</div>
<DhIcon name="sparkles" /> <!-- default 2 -->
<div style="--dh-icon-stroke-width: 2.75">
<DhIcon name="sparkles" />
</div>Color via currentColor
<div style="color: var(--color-primary)">
<DhIcon name="plus" />
</div>
<div style="color: var(--color-error)">
<DhIcon name="triangle-alert" />
</div>Import the name list
Use the exported ICON_NAMES array when you need to build pickers or validate an icon name at runtime.
ICON_NAMES.length is 1960.
import { ICON_NAMES } from '@davidhorn/justin';
// ICON_NAMES is a readonly string[] — every value is a valid <DhIcon name="..." />.Catalog
1960 iconsPowered by Lucide. Each
glyph ships as its own static asset and is fetched on demand — your app only pays for the
icons it renders. Click an icon to copy <DhIcon name="..." />.
Showing 200 of 1960. Type to filter the full set — 1760 more matches when you search.