Pro Packages

A Pro plan gives you access to all 31,204 Lineicons icons. The Pro packages deliver the Pro icons as components, one package per style. They work the same way as @lineiconshq/free-icons. The only difference is that you download the package files from your account and install them from a local file instead of the npm registry.

Before You Start

You need:

• An active Pro plan 
• A React, Vue, Angular, or React Native project
• The wrapper package for your framework (see Step 4)

Available Packages

There is one package per style. All packages are at version 1.0.0.

Step 1: Download the Package Files

1. Log in to your Lineicons account.
2. Go to Profile > Downloads.
3. Download the .tgz file for each style you need.

Step 2: Add the Files to Your Project

Create a vendor/lineicons folder in your project root and move the files into it:

my-app/
├── package.json
├── src/
└── vendor/
    └── lineicons/
        ├── lineiconshq-pro-core-outlined-5.2.0.tgz
        └── lineiconshq-pro-core-solid-5.2.0.tgz

Step 3: Install the Packages

Install each file from its local path:

npm install ./vendor/lineicons/lineiconshq-pro-core-outlined-5.2.0.tgz ./vendor/lineicons/lineiconshq-pro-core-solid-5.2.0.tgz

pnpm add ./vendor/lineicons/lineiconshq-pro-core-outlined-5.2.0.tgz ./vendor/lineicons/lineiconshq-pro-core-solid-5.2.0.tgz

yarn add ./vendor/lineicons/lineiconshq-pro-core-outlined-5.2.0.tgz ./vendor/lineicons/lineiconshq-pro-core-solid-5.2.0.tgz

bun add ./vendor/lineicons/lineiconshq-pro-core-outlined-5.2.0.tgz ./vendor/lineicons/lineiconshq-pro-core-solid-5.2.0.tgz

Your package.json now points to the local files with file: paths:

{
  "dependencies": {
    "@lineiconshq-pro/core-outlined": "file:vendor/lineicons/lineiconshq-pro-core-outlined-5.2.0.tgz",
    "@lineiconshq-pro/core-solid": "file:vendor/lineicons/lineiconshq-pro-core-solid-5.2.0.tgz"
  }
}

Step 4: Install the Wrapper

The Pro packages contain the icon data. The wrapper package renders them. Skip this step if you already set up free icons, since the wrapper is the same.

npm install @lineiconshq/react-lineicons

npm install @lineiconshq/vue-lineicons

npm install @lineiconshq/angular-lineicons

npm install @lineiconshq/react-native-lineicons react-native-svg

Step 5: Use Pro Icons

Pro icons are named without a style suffix. The style comes from the package you import from, so AlarmError from @lineiconshq-pro/core-outlined is the outlined version.

To find an icon’s import name, open the icon on lineicons.com/icons  and click Copy Icon Name in the details panel. Convert the name to PascalCase for the import, for example alarm-error becomes AlarmError.

import { Lineicons } from "@lineiconshq/react-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
import { BadgeBolt2 } from "@lineiconshq-pro/core-solid";
 
function App() {
  return (
    <div>
      <Lineicons icon={AlarmError} size={24} color="blue" strokeWidth={1.5} />
      <Lineicons icon={BadgeBolt2} size={40} color="orange" />
    </div>
  );
}
 
export default App;

<template>
  <div>
    <Lineicons :icon="AlarmError" :size="24" color="blue" :stroke-width="1.5" />
    <Lineicons :icon="BadgeBolt2" :size="40" color="orange" />
  </div>
</template>
 
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
import { BadgeBolt2 } from "@lineiconshq-pro/core-solid";
</script>

import { Lineicons } from "@lineiconshq/react-native-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
import { BadgeBolt2 } from "@lineiconshq-pro/core-solid";
 
export default function App() {
  return (
    <>
      <Lineicons icon={AlarmError} size={32} color="#007AFF" strokeWidth={2} />
      <Lineicons icon={BadgeBolt2} size={32} color="#007AFF" />
    </>
  );
}

For Angular, see Using Pro Icons in Angular.

Using Free and Pro Together

You can install @lineiconshq/free-icons and the Pro packages side by side. Free icon names end with a style suffix (Home2Outlined), and Pro icon names do not (AlarmError), so they rarely clash.

Names do clash when you use the same Pro icon in two styles. Rename one on import:

import { AlarmError } from "@lineiconshq-pro/core-outlined";
import { AlarmError as AlarmErrorSolid } from "@lineiconshq-pro/core-solid";

The same pattern works for free icons:

import { Home2Outlined as Home2OutlinedFree } from "@lineiconshq/free-icons";

Keep @lineiconshq/free-icons installed if you use free icons. The Pro packages do not include the free icon set.

Deploying

Installs work on CI and hosting platforms because package.json uses file: paths. Commit the vendor/lineicons folder so the files are there when your build runs npm install.

Updating to a New Version

1. Download the new .tgz files from Profile > Downloads.
2. Move them into vendor/lineicons.
3. Reinstall from the new paths, for example npm install ./vendor/lineicons/<new-file>.tgz.
4. Delete the old .tgz files.
5. Commit package.json, your lockfile, and the vendor/lineicons folder.

See the Changelog for what changed in each release.

Troubleshooting

• Cannot find module '@lineiconshq-pro/core-outlined': The package is not installed. Run the install command from Step 3 for that style.
• ENOENT during install: The path in the command or in package.json does not match the file. Check the folder and file name, including the version number.
• Install fails on CI only: The .tgz files are not committed. Check that .gitignore does not exclude vendor/ or *.tgz.
• An imported icon is undefined: The name does not exist in that package. Pro names have no style suffix, so AlarmErrorOutlined is undefined while AlarmError works. Free icons such as Home2Outlined are not in the Pro packages; import them from @lineiconshq/free-icons.

Still stuck? Contact support  or ask on Discord .