Docs
Installation

Installation

Lineicons (now version 5.1+) 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.1/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

Lineicons provides a core package for traditional web font usage and modern SVG component packages for popular frameworks. The component packages offer better performance, scalability, and customization (size, color, stroke width).

Core Package (Web Font)

For basic projects or Svelte:

npm install lineicons

or

yarn add lineicons

Import the CSS:

<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css"/>

Framework-Specific SVG Components

These packages provide dedicated components for seamless SVG icon usage (free icons via @lineiconshq/free-icons; Pro icons require manual .tgz installation — see guides).

  • React
    Package: @lineiconshq/react-lineicons
    Install (free icons):

    npm install @lineiconshq/react-lineicons @lineiconshq/free-icons

    Usage example:

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

    Guide: https://lineicons.com/integrations/react (opens in a new tab)

  • Vue
    Package: @lineiconshq/vue-lineicons
    Install (free icons):

    npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons

    Usage example (Composition API):

    <template>
  <Lineicons :icon="Home2Outlined" :size="48" color="blue" />
</template>
 
<script setup>
import { Lineicons } from '@lineiconshq/vue-lineicons';
import { Home2Outlined } from '@lineiconshq/free-icons';
</script>

    Guide: https://lineicons.com/integrations/vue (opens in a new tab)

  • Angular
    Package: @lineiconshq/angular-lineicons
    Install (free icons):

    npm install @lineiconshq/angular-lineicons @lineiconshq/free-icons

    Usage example:

    <lineicons [icon]="Home2Outlined" [size]="48" [color]="'blue'"></lineicons>

    Guide: https://lineicons.com/integrations/angular (opens in a new tab)

  • React Native
    Package: @lineiconshq/react-native-lineicons
    Install (free icons):

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

    Usage example:

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

    Guide: https://lineicons.com/integrations/react-native (opens in a new tab)

For other frameworks (e.g., Svelte, Next.js), use the core web font package or direct SVG imports. Detailed Pro icon setup and advanced usage available in each guide.

3. CDN Integration

Quickly add Lineicons without local files.

Free CDN:

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

Pro CDN:

  1. Go to Profile > CDN settings > CDN links.
  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 (opens in a new tab).
  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 (opens in a new tab).
  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

Inline SVG (Recommended for customization)

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 (opens in a new tab). (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!

IntroductionBasic Usage