Icons

Plug an icon library into Bridge UI with the icon adapter.

Bridge UI does not ship a default icon set. Components that need icons—and the Icon component itself—accept either a concrete icon component or a semantic name resolved through an optional icon adapter on BridgeUIProvider (global.icons).

Bridge defines the IconAdapter interface: resolve and optional normalize. Ready factories ship in the separate @bridge-ui/adapters package under icon-* subpaths. Install it together with the matching icon library. The table below is the package list for each factory.

Import

import { SEMANTIC_ICON_NAMES, type IconAdapter } from "@bridge-ui/vue";

import { SEMANTIC_ICON_NAMES, type IconAdapter } from "@bridge-ui/react";

Examples

Pass an IconAdapter to global.icons. On Vue you can also use createBridgeUI(); in Astro, wire it once via appEntrypoint.

Each factory exports create*IconAdapter() and returns a plain IconAdapter. Use SEMANTIC_ICON_NAMES for the full name list at runtime; extend via TypeScript module augmentation (SemanticIconNameOverrides)—see Type overrides.

import { createLucideIconAdapter } from "@bridge-ui/adapters/vue/icon-lucide";

const icons = createLucideIconAdapter();

import { createLucideIconAdapter } from "@bridge-ui/adapters/react/icon-lucide";

const icons = createLucideIconAdapter();

Concrete components from any icon library still work without an adapter:

<Icon icon={AnyIconComponent} />

import type { IconAdapter, SemanticIconName } from "@bridge-ui/react";

const map = {
  /* …every SemanticIconName… */
} satisfies Record<SemanticIconName, unknown>;

const icons: IconAdapter = {
  resolve(name) {
    return map[name];
  },
};

Some libraries (for example Font Awesome) pass native definitions instead of components. Those adapters provide normalize so both semantic names and raw definitions render. The Font Awesome adapter also exports wrapFaIcon when you need a component outside Icon.

API

Next steps

• Icon — component API and sizing
• Dates — date library adapter
• i18n — translate Bridge chrome strings
• Default props — other global provider options