5.0
Go ProLogin
LineIcons Angular — Free & Pro Icon Collections for Angular

LineIcons Angular — Free & Pro Icon Collections for Angular

Lightweight, scalable Angular components for Lineicons. Easily add modern SVG icons (Free & Pro) to your Angular projects with full TypeScript support.

📦 What's Included

Free Icons

  • Free Collection from @lineiconshq/free-icons
    Includes multiple styles like stroke, outlined, duotone, bulk, and solid.

Pro Icons (Premium)

  • Bulk Icons: Bold, filled style icons (4800+)
  • Duotone Icons: Two-tone icons (4808+)
  • Solid Icons: Filled style icons (4806+)
  • Stroke Icons: Customizable stroke width (4806+)
  • Outlined Icons: Clean outlined style (4806+)

🚀 Installation

Option 1: Free Version

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

Option 2: Pro Version (Local .tgz Files)

# Install Angular LineIcons
npm i @lineiconshq/angular-lineicons

If your .tgz icon packages are in the lineicons/ directory:

npm install ./lineicons/@lineicons-pro-core-solid-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-outlined-1.0.0.tgz

If your .tgz files are in the root directory:

npm install ./@lineicons-pro-core-solid-1.0.0.tgz
npm install ./@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./@lineicons-pro-core-outlined-1.0.0.tgz

💡 Usage

Standalone Components (Free or Pro)

import { Component } from "@angular/core";
import { LineiconsComponent } from "@lineiconshq/angular-lineicons";

// Free icons
import {
  Home2Stroke,
  Home2Outlined,
  CloudBolt1Bulk,
  CloudBolt1Outlined,
  CloudBolt1Duotone,
  CloudBolt1Solid,
} from "@lineiconshq/free-icons";

// Pro icons (if installed)
import { AlarmError } from "@lineiconshq-pro/core-solid";
import { Wallet2 } from "@lineiconshq-pro/core-stroke";
import { FlagIpo } from "@lineiconshq-pro/core-duotone";
import { Achievement } from "@lineiconshq-pro/core-bulk";
import { BadgeBolt2 } from "@lineiconshq-pro/core-outlined";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [LineiconsComponent],
  template: `
    <div>
      <!-- Free Icons -->
      <lineicons
        [icon]="Home2Stroke"
        [size]="24"
        [color]="'blue'"
        [strokeWidth]="1.5"
      ></lineicons>
      <lineicons
        [icon]="CloudBolt1Duotone"
        [size]="30"
        [color]="'green'"
      ></lineicons>

      <!-- Pro Icons -->
      <lineicons
        [icon]="Wallet2"
        [size]="24"
        [color]="'blue'"
        [strokeWidth]="1.5"
      />
      <!-- stroke only -->
      <lineicons [icon]="AlarmError" [size]="24" [color]="'blue'"></lineicons>
      <lineicons [icon]="Achievement" [size]="50" [color]="'blue'"></lineicons>
      <lineicons
        [icon]="BadgeBolt2"
        [size]="24"
        [ngStyle]="{ opacity: 0.8 }"
      ></lineicons>
    </div>
  `,
})
export class AppComponent {}

Module-Based Applications

import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { LineiconsModule } from "@lineiconshq/angular-lineicons";

// Free or Pro imports
import { Home2Outlined, CloudBolt1Bulk } from "@lineiconshq/free-icons";
import { AlarmError } from "@lineiconshq-pro/core-solid";

@Component({
  selector: "app-root",
  template: `
    <div>
      <lineicons
        [icon]="Home2Outlined"
        [size]="24"
        [color]="'blue'"
      ></lineicons>
      <lineicons
        [icon]="CloudBolt1Bulk"
        [size]="40"
        [color]="'orange'"
      ></lineicons>
      <lineicons [icon]="AlarmError" [size]="24" [color]="'red'"></lineicons>
    </div>
  `,
})
export class AppComponent {
  Home2Outlined = Home2Outlined;
  CloudBolt1Bulk = CloudBolt1Bulk;
  AlarmError = AlarmError;
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LineiconsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

🧩 Lineicons Component API

export interface IconData {
  name: string;
  svg: string;
  viewBox: string;
  defaultFill?: string;
  defaultStroke?: string;
  hasFill: boolean;
  hasStroke: boolean;
  hasStrokeWidth: boolean;
}
Input Type Default Description
icon IconData — (required) The icon data object to render.
size number | string 24 Icon size in pixels or any CSS unit.
color string currentColor Icon color.
strokeWidth number 1.5 Stroke width (for stroke icons only).
className string '' Optional CSS class.
ngStyle Record<string, string | number> | null null Optional inline styles.

All standard SVG attributes are also supported through Angular attribute binding.

🎨 Icon Styles

Style Package Description
Solid @lineicons-pro/core-solid Filled solid icons
Bulk @lineicons-pro/core-bulk Bold, filled icons
Duotone @lineicons-pro/core-duotone Two-tone icons
Stroke @lineicons-pro/core-stroke Customizable stroke width
Outlined @lineicons-pro/core-outlined Minimal outlined icons

🧠 TypeScript Support

Fully typed — includes definitions for:

  • LineiconsComponent
  • IconData interface
  • All icon exports (Free & Pro)

📄 License

🔗 Useful Links

Discord Community

Content with creators & coders, join our discord crew!

Join Server Now
Newsletter

Get fresh updates, free resources, exclusive offers, & product news—straight to your inbox.