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.

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.

Sizes

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

Customization

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

Related components

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