@flipdish/ui-icons

A single, source-agnostic import surface for icons used across the Flipdish Design System. Wraps @untitledui/icons behind a stable seam, plus any Flipdish-specific custom icons.

import { SearchLg } from "@flipdish/ui-icons";

Internal design system, published publicly. Built for Flipdish products and shared across Flipdish micro-frontends; on the public npm registry for that reason rather than as a general-purpose icon library.

Part of the Flipdish Design System:

| Package | Purpose | | ---------------------------------------------------------------------------- | -------------------------------------------- | | @flipdish/ui-tokens | Design tokens — colours, type scale, spacing | | @flipdish/ui-icons | Icon set (this package) | | @flipdish/ui-library | Components |

Installation

pnpm add @flipdish/ui-icons

react is the only peer dependency (icons are React components; you provide React).

Usage

Every icon — upstream and custom — is imported from the package root:

import { SearchLg, FileIcon, PlaceholderIcon } from "@flipdish/ui-icons";

<SearchLg className="size-5 text-secondary" />;

Icons take standard SVGProps<SVGSVGElement>, use currentColor, and are sized via props/utilities — so they recolour through semantic token utilities (text-*) and dark mode for free.

Named ESM exports stay tree-shakeable in production builds (this package and @untitledui/icons both declare sideEffects: false), so you only ship the icons you import.

Why a separate package

• Lean component library — icon sets are large and version independently; bundling them into @flipdish/ui-library would bloat every consumer regardless of which icons it uses.
• Stable seam — consumers import from @flipdish/ui-icons; the backing source can change without breaking import sites.
• Cross-platform ready — isolating icons keeps the eventual web (SVG) + React Native (react-native-svg) split out of the component layer.

Changelog

See CHANGELOG.md for release history.

Contributing

This package lives in the flipdish-design-system monorepo. Contributor documentation — including how to add or override an icon — lives alongside the source there.