Skip to Content

Installation

Lineicons (now version 5.2) offers multiple ways to integrate icons into your projects. This updated guide includes the original installation methods plus new sections on SVG usage, Figma integration, and expanded NPM package details based on the latest documentation.

1. Icon Font (Web Font)

The icon font method provides easy integration with simple class-based usage.

Step 1: Load the CSS

Add the stylesheet to your <head> section.

Local:

<link href="your-project-dir/icon-font/lineicons.css" rel="stylesheet" />

Free CDN (Recommended):

<link
  href="https://cdn.lineicons.com/5.2/line/lineicons.css"
  rel="stylesheet"
/>

Step 2: Use the Icons

Add the class names to any HTML element.

<i class="lni lni-telephone-3"></i>

2. Using NPM

Pick the package that matches your plan and setup:

You wantInstallJump to
All 31,204 Pro icons as components@lineiconshq-pro/core-* (local .tgz) + framework wrapperPro Icons
Free icons as components@lineiconshq/free-icons + framework wrapperFree Icons
Free icons as a web font (any stack)lineiconsWeb Font

The component packages are SVG-based: tree-shakable, and you can set size, color, and strokeWidth on every icon.

Pro Icons (NPM)

Pro packages are not on the public npm registry, so npm install @lineiconshq-pro/... on its own will fail. Log in to your Lineicons account, download the package files from the Downloads  page, and install them from a local file. Everything else works like the free packages.

Download the packages

Log in to your Lineicons account and open Downloads  (in the account menu). Download the .tgz file for each style you need:

StylePackage
Stroke@lineiconshq-pro/core-stroke
Outlined@lineiconshq-pro/core-outlined
Solid@lineiconshq-pro/core-solid
Duotone@lineiconshq-pro/core-duotone
Bulk@lineiconshq-pro/core-bulk

Move them into your project

Run this from your project root (change ~/Downloads if you saved the files elsewhere):

mkdir -p vendor/lineicons && mv ~/Downloads/lineiconshq-pro-core-*.tgz vendor/lineicons/

Install the Pro packages

This installs every .tgz file in vendor/lineicons:

npm install ./vendor/lineicons/*.tgz

On Windows, *.tgz is not expanded. List each file path instead, as shown in the Pro Packages guide.

Install the wrapper for your framework

npm install @lineiconshq/react-lineicons

Use Pro icons

Pro icon names have no style suffix. The style comes from the package you import from.

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

To get an icon’s import name, open it on lineicons.com/icons , click Copy Icon Name, and convert it to PascalCase (alarm-error → AlarmError).

Commit vendor/lineicons so CI and hosting builds can install it, but only in private repositories. Never publish the .tgz files to npm or push them to a public repo.

For deploying, updating, using Free and Pro together, and troubleshooting, see the full Pro Packages guide.

Free Icons (NPM)

Install the wrapper for your framework together with @lineiconshq/free-icons:

npm install @lineiconshq/react-lineicons @lineiconshq/free-icons
import { Lineicons } from "@lineiconshq/react-lineicons";
import { Home2Outlined } from "@lineiconshq/free-icons";
 
<Lineicons icon={Home2Outlined} size={48} color="blue" />;

Guide: React Integration

Web Font (NPM)

For Svelte, plain HTML, or any stack without a component wrapper:

npm install lineicons

Then load the CSS and use the classes:

<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css" />
<i class="lni lni-telephone-3"></i>

3. CDN Integration

Quickly add Lineicons without local files.

Free CDN:

<link
  href="https://cdn.lineicons.com/5.2/line/lineicons.css"
  rel="stylesheet"
/>

Pro CDN:

  1. Go to Profile > CDN Settings > CDN Link.
  2. Authorize your site.
  3. Copy and paste the provided Pro CDN link into your <head>.

Note: CDN limits depend on your subscription.

4. Manual Download

For offline use or full control:

  1. Browse icons on lineicons.com/icons .
  2. Create a collection or select individual icons.
  3. Customize (color, size, etc.) and download as a zip.
  4. Unzip and use the files directly.

5. Using SVG Icons

Lineicons provides individual SVG files for scalable, customizable icons—ideal for modern web and responsive designs.

How to Download SVGs

  1. Visit lineicons.com/icons .
  2. Search or browse for icons.
  3. Customize color, size, rotation if needed.
  4. Download as SVG (free or pro based on icon).

Usage Methods on Websites

Paste the SVG code directly into HTML:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="48"
  height="48"
  viewBox="0 0 24 24"
  fill="currentColor"
>
  <!-- Paste the <path> from the downloaded SVG here -->
</svg>

As <img> Tag

<img src="path/to/your-icon.svg" alt="Icon" width="48" height="48" />

SVG Sprite with <use>

Create a sprite file or reference externally for reuse.

SVGs offer better performance and styling flexibility compared to icon fonts.

6. Figma Integration

Use Lineicons directly in Figma for design workflows.

Install the Lineicons Figma Plugin

  1. Visit the plugin page: Lineicons on Figma Community . (Or find it via footer link or your Lineicons profile.)
  2. Click “Open in” a new Figma file.
  3. Click “Run” to install and launch.
  4. Search and insert icons directly into your designs.

Pro Tip: Organize icons in separate layers/groups for a clean workspace. Customize colors, sizes, and styles within Figma.

Additional Notes

  • Supported Formats: SVG, PNG, Web Font, JSX/TSX (React), Vue, Svelte, HTML, Figma files, and more.
  • For framework-specific integrations and Pro icon details, refer to the dedicated guides linked above.
  • Create custom collections on the site for project-specific icon sets.

With these updated methods, Lineicons integrates seamlessly into web, mobile, and design projects!

Last updated on
IntroductionBasic Usage