For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/icon/index.md.
ooui-react
  • English

      • Icon

      Source | Original component

      The basic icon component.

      Basic usage

      import { Icon } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Icon icon="image" title="image" />
      <Icon icon="alert" title="alert" />
      <Icon icon="add" title="add" />
      <Icon icon="arrowDown" title="arrowDown" />
    </div>
  );
}

export default App;

      Icon names come from the OOUI theme's icon set; the full list and grouping are in "All icons" at the end of the page, and the upstream reference is the icons page of the OOUI demos.

      Variants

      flags hit the theme's image-variant classes (oo-ui-image-{flag}) to tint the icon. invert targets dark backgrounds and requires you to supply a dark backdrop.

      import { Icon } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Icon icon="alert" flags="progressive" title="progressive" />
      <Icon icon="alert" flags="destructive" title="destructive" />
      <span style={{ display: "inline-block", background: "#222", padding: "4px 8px" }}>
        <Icon icon="alert" flags="invert" title="invert" />
      </span>
      <Icon icon="alert" flags="error" title="error" />
      <Icon icon="alert" flags="warning" title="warning" />
      <Icon icon="alert" flags="success" title="success" />
    </div>
  );
}

export default App;

      Disabled state

      disabled outputs oo-ui-widget-disabled and aria-disabled, and emits the oo-ui-widget class chain per the original Widget.

      import { Icon } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Icon icon="image" title="Normal" />
      <Icon icon="image" disabled title="Disabled" />
    </div>
  );
}

export default App;

      API

      PropDescriptionTypeDefault
      iconIcon name, taken from the theme icon setstring—
      flagsExtra flags, output via oo-ui-flaggedElement-{flag} and oo-ui-image-{flag}IconFlag | IconFlag[][]
      disabledWhether disabledbooleanfalse
      ...restNative span props (className, title, aria-*, events, etc.) passed straight to the rootHTMLAttributes<HTMLSpanElement>—

      IconFlag is 'progressive' | 'destructive' | 'invert' | 'error' | 'warning' | 'success'.

      All icons

      Click an icon to copy its name.

      293 icons

      Icons – movement

      Icons – content

      Icons – alerts

      Icons – interactions

      Icons – moderation

      Icons – editing-core

      Icons – editing-styling

      Icons – editing-functions

      Icons – editing-list

      Icons – editing-advanced

      Icons – editing-citation

      Icons – media

      Icons – location

      Icons – user

      Icons – layout

      Icons – accessibility

      Icons – wikimedia