@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 |
@flipdish/ui-connected | API-connected components |
Installation
pnpm add @flipdish/ui-icons
react is the only peer dependency (icons are React components; you provide React).
Usage
Prefer the per-icon subpath — identical on web and React Native, and the only form that tree-shakes on Metro (the root barrel pulls every listed icon into the native bundle):
import { SearchLg } from "@flipdish/ui-icons/SearchLg";
import { PlaceholderIcon } from "@flipdish/ui-icons/PlaceholderIcon";
<SearchLg className="size-5 text-secondary" />;
The root import still works for web (and for the curated native subset listed in
src/index.native.ts):
import { SearchLg, FileIcon, PlaceholderIcon } from "@flipdish/ui-icons";
On web, 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).
On React Native, the react-native export condition selects a react-native-svg build
generated from upstream at build time (scripts/generate-icons.mjs), so every upstream
icon is available via its subpath. Native icons take size / color / strokeWidth rather
than web's width / height / SVGProps. The default color is a light-mode stand-in for
fg-quaternary (#a3a3a3); pass color explicitly when a parent component knows the
token. Six directional icons carry a web-only data-rtl-flip attribute that is dropped on
native — RTL mirroring is the consuming screen's responsibility.
Why a separate package
- Lean component library — icon sets are large and version independently; bundling them into
@flipdish/ui-librarywould 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.