Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Icon

The curated glyph set for ploxum-ui, shipped from @roger-emerson/ploxum-icons. As of 0.9.0 the package re-bases its glyphs on Material Design Outlined — self-hosted, build-time-rendered SVG, with no lucide-react runtime dependency. Names, sizing, and the call-site API are unchanged, so existing imports (Menu, Bell, HeartPulse, …) keep working — only the rendered glyph shape changes (outlined Material instead of Lucide stroke).

Import

// Named glyphs — tree-shakeable, one component per icon
import { Bell, HeartPulse, Search, Shield } from "@roger-emerson/ploxum-icons";
 
// The Icon wrapper (primitive) — size + tone variants over any glyph
import { Icon } from "@roger-emerson/ploxum-primitives";

Each export is a forwardRef SVG component. The package has an empty dependencies block — Material Outlined glyph markup is generated at build time (scripts/generate-icons.mjs) and frozen into the bundle, so nothing pulls lucide-react at runtime.

Usage

Glyphs take a size (px, default 24), an optional color (defaults to currentColor, so they inherit text color), a className, and any pass-through SVG / aria-* / data-* props:

<Bell size={16} />
<HeartPulse size={20} className="text-critical" />
<Search size={16} color="var(--ploxum-color-amber-bright)" />
 
// Labelled (interactive / standalone) — role + aria-label opt out of aria-hidden
<button aria-label="Notifications">
  <Bell size={18} aria-label="Notifications" />
</button>

By default a glyph renders aria-hidden="true" (decorative). Pass role or aria-label and it drops aria-hidden so assistive tech announces it.

strokeWidth is a no-op

Material Outlined glyphs are fill-based, not stroked. strokeWidth is still accepted on the props type for Lucide source-compatibility, but it is destructured out and never reaches the DOM — passing it has no visual effect. To make a glyph heavier or lighter, swap the glyph or scale size, don't reach for strokeWidth.

// Accepted, but ignored — no thicker stroke is rendered:
<Shield size={16} strokeWidth={2.5} />

The Icon wrapper

Icon (from @roger-emerson/ploxum-primitives) wraps any glyph with the density/token-aware size scale and tone variants, so call sites don't hand-tune size per context:

import { Icon } from "@roger-emerson/ploxum-primitives";
import { HeartPulse } from "@roger-emerson/ploxum-icons";
 
<Icon size="sm">
  <HeartPulse />
</Icon>

Reach for the wrapper when you want the shared size scale; import the named glyph directly when you just need a one-off at an explicit pixel size.

Glyph roster

Names are stable across the Material swap — same identifiers as the Lucide-era set:

Activity · AlertTriangle · Archive · Bell · Check · ChevronDown · ChevronLeft · ChevronRight · ChevronUp · Circle · ClipboardList · Clock · Command · Copy · Cpu · Database · DollarSign · Droplets · Eye · Factory · Filter · GripVertical · Handshake · Headphones · HeartPulse · Info · LayoutDashboard · Loader2 · Lock · LogIn · LogOut · Mail · Map · MapPin · Maximize2 · Megaphone · Minus · Monitor · Moon · MoreHorizontal · Music · Network · Palette · Pause · Play · Plus · Radio · Recycle · Search · Server · Settings · Shield · ShieldAlert · Square · Store · Sun · Thermometer · Trash2 · Triangle · Truck · Users · Wifi · Wind · Wrench · X · Zap

For source compatibility, the package also re-exports the LucideProps / LucideIcon type aliases (now pointing at the local IconProps / PloxumIcon types), so existing import type { LucideIcon } call sites compile unchanged.

Design rules

  • Names + API are frozen across the swap. The Material re-base changes the rendered glyph only. size, color, className, aria-*, and the named exports are identical — a Material swap is a drop-in.
  • strokeWidth is inert. Filled Material glyphs have no stroke; the prop is accepted but discarded so a stroke width never lands on the DOM. Don't rely on it.
  • Decorative by default. Glyphs emit aria-hidden="true" unless you give them a role or aria-label. Label standalone, interactive icons; leave inline-with-text glyphs hidden.
  • Inherit color. color defaults to currentColor — prefer setting text color on the parent (or a token-bound className) over hardcoding a color per glyph.
  • No runtime icon dep. Glyph markup is build-time-generated and self-hosted; the published package ships zero runtime dependencies.

Storybook

Open Icon in Storybook ↗