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.
  • 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