Design tokens

Icons

Nova wraps lucide-react with a thin, opinionated Icon primitive — enforced accessibility, semantic sizing, and currentColor by default.

Philosophy

Icons are typography. They should share weight with the surrounding text — 1.75 stroke, currentColor, and a size that snaps to the type scale.

Nova standardizes on lucide-react for its geometric consistency. The wrapper enforces the parts that are easy to get wrong: accessibility semantics and pixel-perfect sizing.

Naming conventions

Import lucide icons in PascalCase — the module exports match.
Prefer nouns for state (Lock, Eye) and verbs for actions (Download, Edit).
Match directional icons to reading order: ArrowRight for "next", ChevronDown for "expand".

Sizes

Token	Pixels	Use
xs	12px	Inline chips, dense tables
sm	14px	Buttons, inputs, badges
md	16px	Default UI icons
lg	20px	Prominent controls, toolbars
xl	24px	Empty states, hero glyphs

Usage

tsx

import { Icon } from "@novix-ui/icons";
import { Sparkles } from "lucide-react";
 
export function Demo() {
  return (
    <>
      {/* Decorative (default) — hidden from assistive tech */}
      <Icon icon={Sparkles} size="sm" />
      {/* Meaningful — requires a label */}
      <Icon icon={Sparkles} decorative={false} label="New feature" />
    </>
  );
}

Accessibility

Gallery

Explore 220+ essential curated Nova icons. Click any icon to copy its import snippet.

224 of 224 icons

Preview Size:

Best practices

Pair icons with text whenever possible — icon-only controls need labels.
Use sm inside buttons and inputs; md elsewhere.
Never restyle stroke width per instance — the 1.75 default keeps the family cohesive.
Color icons via text-* utilities; they inherit currentColor.