tailwindlabs/heroicons · error · Error

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

Error message

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

What it means

Same v1 compatibility shim as the Vue outline variant, but for the `solid` style: `@heroicons/vue/solid/<Icon>` throws under heroicons v2. V1's per-file default exports were replaced in v2 by named exports from size/style directories.

Source

Thrown at vue/solid/index.js:9

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

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

module.exports = proxy

View on GitHub (pinned to 616b7a4dbb)

Solutions

Rewrite to `import { BeakerIcon } from '@heroicons/vue/24/solid'` (choose 16/20/24).
Or install v1: `npm install @heroicons/vue@v1` if migration is deferred.
Codemod all `@heroicons/vue/solid/<Icon>` imports; v2 uses named exports.
Align heroicons versions across packages and update editor snippets so v1 paths stop being generated.

Example fix

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

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

Defensive patterns

Strategy: validation

Validate before calling

// detect v1 solid paths against v2
const pkg = require('@heroicons/vue/package.json')
if (pkg.version.startsWith('2.')) {
  const { execSync } = require('child_process')
  const hits = execSync("grep -rl \"@heroicons/vue/solid/\" src || true").toString().trim()
  if (hits) throw new Error('v1-style @heroicons/vue/solid imports found: ' + hits)
}

Prevention

Lock the heroicons major; regenerate lockfile on upgrades.
Codemod '/solid/<Icon>' default imports to named imports from '@heroicons/vue/24/solid'.
Lint rule banning '@heroicons/vue/solid' as an import prefix.
Keep monorepo packages on a single heroicons major.

When it happens

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

Common situations: Vue apps upgraded from heroicons v1 without touching icon imports; shared component libraries authored against v1; outdated snippets and AI/editor suggestions; monorepos with mixed heroicons majors.

Related errors

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