What causes "feather: '${name}' is not a valid icon" in feathericons/feather?

Correct the data-feather value to a valid feather icon name (kebab-case, see https://feathericons.com).

feather: '${name}' is not a valid icon

Error message

feather: '${name}' is not a valid icon

What it means

replaceElement reads the element's `data-feather` attribute and looks the value up in the icons map. If no icon matches, it does not throw — it logs this console.warn and leaves the element untouched (with the data-feather attribute removed). The SOURCE confirms this is a warning path, not an exception.

Source

Thrown at src/replace.js:35

  Array.from(elementsToReplace).forEach(element =>
    replaceElement(element, attrs),
  );
}

/**
 * Replace a single HTML element with SVG markup
 * corresponding to the element's `data-feather` attribute value.
 * @param {HTMLElement} element
 * @param {Object} attrs
 */
function replaceElement(element, attrs = {}) {
  const elementAttrs = getAttrs(element);
  const name = elementAttrs['data-feather'];
  delete elementAttrs['data-feather'];

  if (icons[name] === undefined) {
    console.warn(`feather: '${name}' is not a valid icon`);
    return;
  }

  const svgString = icons[name].toSvg({
    ...attrs,
    ...elementAttrs,
    ...{ class: classnames(attrs.class, elementAttrs.class) },
  });
  const svgDocument = new DOMParser().parseFromString(
    svgString,
    'image/svg+xml',
  );
  const svgElement = svgDocument.querySelector('svg');

  element.parentNode.replaceChild(svgElement, element);
}

/**

View on GitHub (pinned to 3dc050d974)

Solutions

Correct the data-feather value to a valid feather icon name (kebab-case, see https://feathericons.com).
Check the console for the warning during development and fix offending elements.
Whitelist/validate icon names before injecting them into HTML.
If an icon doesn't exist in feather, use another set or a custom SVG instead.

Example fix

// before
<i data-feather="ArrowRight"></i>

// after
<i data-feather="arrow-right"></i>

Defensive patterns

Strategy: validation

Validate before calling

const el = document.querySelector('[data-feather]');
const name = el && el.getAttribute('data-feather');
if (name && !(name in feather.icons)) console.warn(`Bad icon: ${name}`);

Type guard

const isValidIconAttr = (v: string | null): v is string => v !== null && v in feather.icons;

Try / catch

try-catch is not applicable: replaceElement warns via console.warn and returns without throwing. Capture console.warn in tests:
const spy = jest.spyOn(console, 'warn').mockImplementation();
feather.replace();
expect(spy).not.toHaveBeenCalledWith(expect.stringContaining('is not a valid icon'));

Prevention

Validate data-feather values against feather.icons at build time
Use a component wrapper that only renders known icon names
Monitor console.warn in development for unmatched icons
Never feed user/CMS-supplied strings directly into data-feather without whitelisting

When it happens

Trigger: An element like <i data-feather="fake-icon"></i> exists in the DOM when feather.replace() runs and 'fake-icon' is not in feather.icons (typo, wrong casing, icon not in installed version).

Common situations: CMS- or user-supplied icon names rendered into HTML; typos in template files; icons referenced in shared components that don't exist in the feather set; casing drift like data-feather="ArrowRight".

Related errors

AI-assisted analysis of feathericons/feather@3dc050d974 (2026-08-30). Data as JSON: /api/errors/7bc2fc547b52e40d. Report an issue: GitHub.