Icon

Renders an icon from a semantic name or a concrete icon component.

Introduction

Icons communicate meaning at a glance—status, actions, or categories. Bridge UI Icon wraps any icon component (or a semantic name) with design-system sizes so icons stay consistent across Button, Alert, TextField, and other components.

Pass a concrete icon component to icon, or a semantic name when an icon adapter is configured on the provider. Use size to match surrounding typography or control dimensions.

Import

import { Icon } from "@bridge-ui/vue/Components/Icon";

import { Icon } from "@bridge-ui/react/Components/Icon";

Basic usage

Pass an icon component to the icon prop. The default size is md. No adapter is required for concrete components.

<script setup lang="ts">
import { Icon } from "@bridge-ui/vue/Components/Icon";
import { Info } from "@lucide/vue";
</script>

<template>
  <div class="flex items-center gap-3">
    <Icon size="md" :icon="Info" />

    <Icon size="lg" :icon="Info" />
  </div>
</template>

import { Icon } from "@bridge-ui/react/Components/Icon";
import { Info } from "lucide-react";

export default function IconBasic() {
  return (
    <div className="flex items-center gap-3">
      <Icon size="md" icon={Info} />

      <Icon size="lg" icon={Info} />
    </div>
  );
}

Semantic names

With an icon adapter on BridgeUIProvider (global.icons), pass a semantic string such as "info". Bridge does not ship a default set—see Icons for setup and library examples.

<script setup lang="ts">
import { BridgeUIProvider } from "@bridge-ui/vue";
import { Icon } from "@bridge-ui/vue/Components/Icon";

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

const icons = createLucideIconAdapter();
</script>

<template>
  <BridgeUIProvider :global="{ icons }">
    <div class="flex items-center gap-4">
      <Icon size="md" icon="info" />
      <Icon size="md" icon="success" />
      <Icon size="md" icon="warning" />
      <Icon size="md" icon="error" />
      <Icon size="md" icon="bell" />
    </div>
  </BridgeUIProvider>
</template>

import { BridgeUIProvider } from "@bridge-ui/react";
import { Icon } from "@bridge-ui/react/Components/Icon";

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

const icons = createLucideIconAdapter();

export default function IconSemantic() {
  return (
    <BridgeUIProvider global={{ icons }}>
      <div className="flex items-center gap-4">
        <Icon size="md" icon="info" />
        <Icon size="md" icon="success" />
        <Icon size="md" icon="warning" />
        <Icon size="md" icon="error" />
        <Icon size="md" icon="bell" />
      </div>
    </BridgeUIProvider>
  );
}

Sizes

Change the icon size with the size prop. Available sizes: 2xs, xs, sm, md, lg, xl, and 2xl.

<script setup lang="ts">
import { Icon } from "@bridge-ui/vue/Components/Icon";
import { Info } from "@lucide/vue";
</script>

<template>
  <div class="flex flex-wrap items-end gap-4">
    <Icon size="2xs" :icon="Info" />
    <Icon size="xs" :icon="Info" />
    <Icon size="sm" :icon="Info" />
    <Icon size="md" :icon="Info" />
    <Icon size="lg" :icon="Info" />
    <Icon size="xl" :icon="Info" />
    <Icon size="2xl" :icon="Info" />
  </div>
</template>

import { Icon } from "@bridge-ui/react/Components/Icon";
import { Info } from "lucide-react";

export default function IconSizes() {
  return (
    <div className="flex flex-wrap items-end gap-4">
      <Icon size="2xs" icon={Info} />
      <Icon size="xs" icon={Info} />
      <Icon size="sm" icon={Info} />
      <Icon size="md" icon={Info} />
      <Icon size="lg" icon={Info} />
      <Icon size="xl" icon={Info} />
      <Icon size="2xl" icon={Info} />
    </div>
  );
}

Customization

Apply custom styles with className (React) or class (Vue) to change color, shadow, or other visual properties.

<script setup lang="ts">
import { Icon } from "@bridge-ui/vue/Components/Icon";
import { Info } from "@lucide/vue";
</script>

<template>
  <Icon size="xl" :icon="Info" class="text-primary-500 drop-shadow-md" />
</template>

import { Icon } from "@bridge-ui/react/Components/Icon";
import { Info } from "lucide-react";

export default function IconCustomization() {
  return (
    <Icon size="xl" icon={Info} className="text-primary-500 drop-shadow-md" />
  );
}

Button, Alert, TextField, Icons

Accessibility

Icons are decorative when adjacent text already conveys the meaning. In that case, the parent component should hide the icon from assistive technology (Bridge UI components that embed icons typically handle this).

When an icon is the only label for a control, provide an accessible name on the interactive element— for example, aria-label on a button—not on the Icon itself.

Meaningful standalone icons should include aria-label or be wrapped by an element with a visible text alternative.

Anatomy

Icon renders a single SVG (or library glyph) scaled by the size prop:

<span> <!-- root wrapper -->
  <svg> <!-- resolved icon -->
</span>

Apply color and other visual styles with className (React) or class (Vue) on the component root.

API

Prop	Type	Default	Description
icon	IconSource	—	Semantic name, icon component, or adapter-normalized native value (e.g. FA).
size	IconSize	"md"	Icon dimensions.