@reliance/icons

React icon wrapper for the Reliance Design System. lucide-react is the primary library; @phosphor-icons/react is a fallback for glyphs lucide doesn't have.

Install

yarn add @reliance/icons

React 18 or 19.

Usage

Import the icon you want and hand the component to StaticIcon:

import { StaticIcon } from "@reliance/icons";
import { ChevronDown } from "@reliance/icons/lucide";

<StaticIcon icon={ChevronDown} size={20} />;

weight accepts Phosphor's vocabulary (thin, light, regular, bold, fill, duotone) and defaults to bold. lucide has no equivalent render mode, so weight maps to a strokeWidth, and fill/duotone additionally render the glyph solid.

Phosphor icons accept weight, color and size natively, so they need no wrapper — render them directly:

import { CaretDown } from "@reliance/icons/phosphor";

<CaretDown weight="fill" size={20} />;

Entry points

| Import | Contains | | ---------------------------- | ------------------------------------------------ | | @reliance/icons | StaticIcon, weight helpers, types, icons | | @reliance/icons/lucide | every lucide icon, as static named exports | | @reliance/icons/phosphor | every Phosphor icon, as static named exports | | @reliance/icons/dynamic | legacy <Icon name="…" /> — 5.93 MB | | @reliance/icons/namespaces | legacy Icons / LucideLibraryIcons namespaces |

Why Icon moved to /dynamic

<Icon name="ChevronDown" /> looks up a string against the lucide and Phosphor namespaces at runtime. That means every glyph in both libraries has to exist in the bundle, so no bundler can tree-shake any of it. Measured cost of importing it: 5.93 MB raw / 1.31 MB gzip, versus ~4 KB raw / ~1.4 KB gzip for StaticIcon plus a static import.

This isn't a bundler configuration problem and no amount of sideEffects: false or subpath exports can fix it — it's inherent to resolving names at runtime. So it lives on its own entry, where paying for it is a deliberate choice. Reach for it only when the name genuinely isn't known until runtime (CMS- or API-driven content); for anything you can name in source, use StaticIcon.

scripts/check-bundle-size.mjs (yarn check-bundle-size) asserts the main entry never regains a dependency on either library — a single import * as or Object.keys() over a namespace is enough to put the 5.93 MB back, and nothing else would fail.

Regenerating

src/generated/ (the two barrels and the icons name list) is generated and committed. After bumping lucide-react or @phosphor-icons/react:

yarn generate-icons