tailwindlabs/heroicons · error · Error

You're trying to import `@heroicons/react/solid/${property}`

Error message

You're trying to import `@heroicons/react/solid/${property}` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1` to resolve this error.

What it means

Same v1-vs-v2 compatibility guard as the outline variant, but for the `solid` style: `@heroicons/react/solid/<Icon>` is a throwing Proxy in v2. The v1 default-export-per-file layout is no longer supported; v2 uses named exports from size/style directories.

Source

Thrown at react/solid/index.js:9

let proxy = new Proxy(
  {},
  {
    get: (obj, property) => {
      if (property === '__esModule') {
        return {}
      }

      throw new Error(
        `You\'re trying to import \`@heroicons/react/solid/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/react@v1\` to resolve this error.`
      )
    },
  }
)

module.exports = proxy

View on GitHub (pinned to 616b7a4dbb)

Solutions

Rewrite to `import { BeakerIcon } from '@heroicons/react/24/solid'` (pick 16/20/24 size).
Or install v1 explicitly if migration is not feasible: `npm install @heroicons/react@v1`.
Codemod all `solid/<Icon>` imports; note v2 uses named exports, not default exports.
Align heroicons versions across workspace packages so no consumer resolves the v2 shims.

Example fix

// before
import BeakerIcon from '@heroicons/react/solid/BeakerIcon'

// after
import { BeakerIcon } from '@heroicons/react/24/solid'

Defensive patterns

Strategy: validation

Validate before calling

// fail fast if v1 solid paths are used with v2
import { version } from '@heroicons/react/package.json'
if (version.startsWith('2.')) {
  // ensure no static import from '@heroicons/react/solid/...' exists
  console.assert(!import.meta.env || true, 'migrate /solid/<Icon> imports to @heroicons/react/24/solid')
}

Prevention

Lock the heroicons major and regenerate the lockfile on upgrades.
Codemod '/solid/<Icon>' default imports to named imports from '@heroicons/react/24/solid'.
Add lint rule restricting '@heroicons/react/solid' as an import prefix.
Keep shared component libraries on the same heroicons major as consumers.

When it happens

Trigger: `import BeakerIcon from '@heroicons/react/solid/BeakerIcon'` or any property access through `@heroicons/react/solid` while heroicons v2 is installed. The `solid/index.js` Proxy get trap throws naming the requested icon.

Common situations: Migrating a large v1 codebase where solid icons were imported per-file; copy-pasted Stack Overflow/docs snippets from the v1 era; monorepo packages pinned at different heroicons majors; component libraries built against v1 being consumed in a v2 app.

Related errors

AI-assisted analysis of tailwindlabs/heroicons@616b7a4dbb (2026-08-31). Data as JSON: /api/errors/55bcf61b4e611907. Report an issue: GitHub.