facebook/react · warning

Unsupported type "${type}" specified for Icon

Error message

Unsupported type "${type}" specified for Icon

What it means

Icon (packages/react-devtools-shared/src/devtools/views/Icon.js) maps a type prop to an SVG path over a fixed set ('arrow', 'bug', 'code', 'components', 'copy', 'error', 'facebook', 'flame-chart', 'profiler', 'ranked-chart', 'search', 'find', 'settings', 'store-as-global-variable', 'strict-mode-non-compliant', 'suspense', 'warning'). Any other value hits the default branch, warns, and renders an icon with an empty path. It is the same pattern as ButtonIcon: an unrecognized enum-ish prop value.

Source

Thrown at packages/react-devtools-shared/src/devtools/views/Icon.js:102

      break;
    case 'settings':
      pathData = PATH_SETTINGS;
      break;
    case 'store-as-global-variable':
      pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
      break;
    case 'strict-mode-non-compliant':
      pathData = PATH_STRICT_MODE_NON_COMPLIANT;
      break;
    case 'suspense':
      pathData = PATH_SUSPEND;
      viewBox = '-2 -2 28 28';
      break;
    case 'warning':
      pathData = PATH_WARNING;
      break;
    default:
      console.warn(`Unsupported type "${type}" specified for Icon`);
      break;
  }

  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.Icon} ${className}`}
      width="24"
      height="24"
      viewBox={viewBox}>
      {title && <title>{title}</title>}
      <path d="M0 0h24v24H0z" fill="none" />
      <path fill="currentColor" d={pathData} />
    </svg>
  );
}

View on GitHub (pinned to eafeac097b)

Solutions

1. Use one of the literal type values handled in Icon.js.
2. Diff your icon names against the version of react-devtools-shared you depend on (names change between releases).
3. Upgrade react-devtools-shared if you intended to use a newly added icon.

Example fix

// before
<Icon type="flamechart" />

// after
<Icon type="flame-chart" />

const ICON_TYPES = new Set([
  'arrow', 'bug', 'code', 'components', 'copy', 'error', 'facebook',
  'flame-chart', 'profiler', 'ranked-chart', 'search', 'find', 'settings',
  'store-as-global-variable', 'strict-mode-non-compliant', 'suspense',
  'warning',
]);
if (!ICON_TYPES.has(type)) {
  throw new Error(`Unknown Icon type: ${type}`);
}

type IconType =
  | 'arrow' | 'bug' | 'code' | 'components' | 'copy' | 'error' | 'facebook'
  | 'flame-chart' | 'profiler' | 'ranked-chart' | 'search' | 'find'
  | 'settings' | 'store-as-global-variable' | 'strict-mode-non-compliant'
  | 'suspense' | 'warning';

// Mirror this list from the Icon.js switch in YOUR react-devtools-shared version.

When it happens

Trigger: Passing a type not in the switch (typo, or an icon name added in a newer DevTools than the react-devtools-shared copy in use); computing the icon type from external data that can contain arbitrary strings.

Common situations: Custom DevTools embeds lagging upstream icon additions; copy-pasting icon names across versions; refactors that rename types (e.g. 'search' vs 'find').

Related errors

• Unsupported type "${type}" specified for ButtonIcon
• The should not be any remaining suspense node children if th
• There should always be an Offscreen Fiber child in a hydrate
• Did not expect a host hoistable to be the root
• A dehydrated Suspense node should not have a content Fiber.

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/e1893dbd4be32b4c. Report an issue: GitHub.