Lineicons Angular — Essential UI Icons for Angular

Lightweight Angular components for Lineicons. Easily add scalable SVG icons to your Angular projects with simple inputs for size, color, and stroke.

Installation

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

Usage

Standalone Components

import { Component } from '@angular/core';
import { LineiconsComponent } from '@lineiconshq/angular-lineicons';
import {
  Home2Stroke,
  Home2Outlined,
  CloudBolt1Bulk,
  CloudBolt1Outlined,
  CloudBolt1Duotone,
  CloudBolt1Solid,
} from '@lineiconshq/free-icons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LineiconsComponent],
  template: `
    <div>
      <lineicons [icon]="Home2Stroke" [size]="24" [color]="'blue'" [strokeWidth]="1.5"></lineicons> // only available for stroke icons
      <lineicons [icon]="Home2Outlined" [size]="24" [color]="'blue'"></lineicons>
      <lineicons [icon]="CloudBolt1Bulk" [size]="40" [color]="'orange'"></lineicons>
      <lineicons [icon]="CloudBolt1Outlined" [size]="50" [color]="'blue'"></lineicons>
      <lineicons [icon]="CloudBolt1Duotone" [size]="30" [color]="'green'"></lineicons>
      <lineicons [icon]="CloudBolt1Solid" [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';
import { Home2Outlined, CloudBolt1Bulk} from '@lineiconshq/free-icons';

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

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

Lineicons Component

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 size unit. | | color | string | currentColor | Icon color. | | strokeWidth | number | 1.5 | Stroke width for only stroke icons. | | className | string | '' | Optional CSS class. | | ngStyle | Record<string, string \| number> \| null | null | Optional inline styles object. |

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

TypeScript Support

Fully typed — includes definitions for the LineiconsComponent, IconData interface, and all icon exports.

License

• Free Icons: MIT License

Links

• 📖 Documentation
• 💬 Support
• 🔌 Figma Plugin
• 📁 Figma Source