tailwindlabs/heroicons · error · Error

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

Error message

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

What it means

In v2, `@heroicons/vue/outline` is a compatibility shim that throws, because v1 exposed icons as `@heroicons/vue/outline/<Icon>`. Reaching this error means v1-style outline imports are still present while heroicons v2 for Vue is installed.

Source

Thrown at vue/outline/index.js:9

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

      throw new Error(
        `You\'re trying to import \`@heroicons/vue/outline/${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

1. Rewrite to a v2 subpath: `import { BeakerIcon } from '@heroicons/vue/24/outline'`.
2. Or pin v1: `npm install @heroicons/vue@v1` if staying on the v1 import layout.
3. Search the repo for `@heroicons/vue/outline/` and migrate each import to the 16/20/24 outline directories.
4. Upgrade or patch any internal UI library that still generates v1-style Vue imports.

Example fix

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

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

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

When it happens

Trigger: `import BeakerIcon from '@heroicons/vue/outline/BeakerIcon'` or property access via `@heroicons/vue/outline` with heroicons v2 installed. The Proxy get trap throws naming the requested icon via `${property}`.

Common situations: Vue 2/3 projects migrating from heroicons v1; following outdated v1 docs or component libraries; lockfile/dedupe leaving v2 installed while code expects v1 paths; codegen templates emitting `outline/` imports.

Related errors

• You're trying to import `@heroicons/vue/solid/${property}` f
• You're trying to import `@heroicons/react/outline/${property
• You're trying to import `@heroicons/react/solid/${property}`
• Importing from `@heroicons/vue` directly is not supported. P
• Importing from `@heroicons/vue` directly is not supported. P

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