open-index/open-npm huggingface dataset:
npm package: @semantic-icons/bootstrap-icons
Description: Icons generated based on bootstrap-icons v1.13.1
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/bootstrap-icons

`@semantic-icons/bootstrap-icons` helps developers to use [Bootstrap icons](https://icons.getbootstrap.com) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/bootstrap-icons | Angular   | Bootstrap-icons |
| ------------------------------- | --------- | --------------- |
| 0.x.x                           | >= 17.1.0 | 1.11.3          |

## Usage

First, install `@semantic-icons/bootstrap-icons` from npm:

```sh
npm install @semantic-icons/bootstrap-icons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiBalloonIcon } from '@semantic-icons/bootstrap-icons';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiBalloonIcon],
  template: `
    <svg class="text-blue-500 size-6" siBalloonIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The icons can be imported from `@semantic-icons/bootstrap-icons`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the word `icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/circle-flags
Description: Icons generated based on circle-flags v2.8.2
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/circle-flags

`@semantic-icons/circle-flags` helps developers to use [Circle flags](https://hatscripts.github.io/circle-flags) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/circle-flags | Angular   | Circle-flags |
| ---------------------------- | --------- | ------------ |
| 0.x.x                        | >= 17.1.0 | 1.0.0        |

## Usage

First, install `@semantic-icons/circle-flags` from npm:

```sh
npm install @semantic-icons/circle-flags
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiFrFlagIcon } from '@semantic-icons/circle-flags';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiFrFlagIcon],
  template: `
    <svg class="size-36" siFrFlagIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The regular icons can be imported from `@semantic-icons/circle-flags`, the other icons can be imported from `@semantic-icons/circle-flags/other`, the language icons can be imported from `@semantic-icons/circle-flags/language`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the words `flag icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/flag-icons
Description: `@semantic-icons/flag-icons` helps developers to use [Flag icons](https://flagicons.lipis.dev) inside [Angular](https://angular.dev) projects.
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/flag-icons

`@semantic-icons/flag-icons` helps developers to use [Flag icons](https://flagicons.lipis.dev) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/flag-icons | Angular   | Flag-icons |
| -------------------------- | --------- | ---------- |
| 0.x.x                      | >= 17.1.0 | 7.2.3      |

## Usage

First, install `@semantic-icons/flag-icons` from npm:

```sh
npm install @semantic-icons/flag-icons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiMaFlagIcon } from '@semantic-icons/flag-icons/square';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiMaFlagIcon],
  template: `
    <svg class="size-36" siMaFlagIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The square shaped icons can be imported from `@semantic-icons/flag-icons/square`, the rectangle shaped icons can be imported from `@semantic-icons/flag-icons/rectangle`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the words `flag icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/flowbite-icons
Description: `@semantic-icons/flowbite-icons` helps developers to use [Flowbite icons](https://flowbite.com/icons) inside [Angular](https://angular.dev) projects.
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/flowbite-icons

`@semantic-icons/flowbite-icons` helps developers to use [Flowbite icons](https://flowbite.com/icons) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/flowbite-icons | Angular   | Flowbite-icons |
| ------------------------------ | --------- | -------------- |
| 0.x.x                          | >= 17.1.0 | 1.3.0          |

## Usage

First, install `@semantic-icons/flowbite-icons` from npm:

```sh
npm install @semantic-icons/flowbite-icons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiBellIcon } from '@semantic-icons/flowbite-icons/solid';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiBellIcon],
  template: `
    <svg class="size-6 text-blue-500" siBellIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The outline icons can be imported from `@semantic-icons/flowbite-icons/outline`, the filled icons can be imported from `@semantic-icons/flowbite-icons/solid`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the word `icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/fontawesome
Description: `@semantic-icons/fontawesome` enables developers to seamlessly use [Font Awesome Free](https://fontawesome.com/) icons as Angular components in [Angular](https://angular.dev) applications.
Author: Khalil LAGRIDA
Latest version: 0.29.0

# @semantic-icons/fontawesome

`@semantic-icons/fontawesome` enables developers to seamlessly use [Font Awesome Free](https://fontawesome.com/) icons as Angular components in [Angular](https://angular.dev) applications.

---

## ✅ Supported Versions

| @semantic-icons/fontawesome | Angular   | @fortawesome/fontawesome-free |
| --------------------------- | --------- | ----------------------------- |
| 0.x.x                       | >= 17.1.0 | 7.0.0                         |

---

## 🚀 Installation

Install the package from npm:

```sh
npm install @semantic-icons/fontawesome
```

---

## 📦 Usage

Each icon is available as an Angular standalone component that follows Angular’s naming conventions.

Example with a **solid cube icon**:

```ts
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiCubeIcon } from '@semantic-icons/fontawesome/full/solid';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiCubeIcon],
  template: `
    <svg class="text-blue-500 size-6" siCubeIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

---

## 🎨 Icon Imports

Icons can be imported from different sets, depending on your needs:

- **Full sets**
  - `@semantic-icons/fontawesome/full/brands`
  - `@semantic-icons/fontawesome/full/regular`
  - `@semantic-icons/fontawesome/full/solid`

- **Cropped sets**
  - `@semantic-icons/fontawesome/cropped/brands`
  - `@semantic-icons/fontawesome/cropped/regular`
  - `@semantic-icons/fontawesome/cropped/solid`

---

## 📝 Naming Convention

- All icons follow Angular component naming conventions.
- They are always **prefixed** with `Si` and **suffixed** with `Icon`.
  - Example: `SiCubeIcon`

---

## 📄 License

MIT © 2024–2026 Khalil LAGRIDA
npm package: @semantic-icons/heroicons
Description: Icons generated based on heroicons v2.2.0
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/heroicons

`@semantic-icons/heroicons` helps developers to use [Heroicons](https://heroicons.com) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/heroicons | Angular   | Heroicons |
| ------------------------- | --------- | --------- |
| 0.x.x                     | >= 17.1.0 | 2.2.0     |

## Usage

First, install `@semantic-icons/heroicons` from npm:

```sh
npm install @semantic-icons/heroicons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiBeakerIcon } from '@semantic-icons/heroicons/24/solid';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiBeakerIcon],
  template: `
    <svg class="size-6 text-blue-500" siBeakerIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The 24x24 outline icons can be imported from `@semantic-icons/heroicons/24/outline`, the 24x24 solid icons can be imported from `@semantic-icons/heroicons/24/solid`, the 20x20 solid icons can be imported from `@semantic-icons/heroicons/20/solid`, and 16x16 solid icons can be imported from `@semantic-icons/heroicons/16/solid`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the word `icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/lineicons
Description: `@semantic-icons/lineicons` helps developers to use [Line icons](https://lineicons.com/icons) inside [Angular](https://angular.dev) projects.
Author: Khalil LAGRIDA
Latest version: 0.56.0

# @semantic-icons/lineicons

`@semantic-icons/lineicons` helps developers to use [Line icons](https://lineicons.com/icons) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/lineicons | Angular   | Lineicons |
| ------------------------- | --------- | --------- |
| 0.x.x                     | >= 17.1.0 | 1.3.2     |

## Usage

First, install `@semantic-icons/lineicons` from npm:

```sh
npm install @semantic-icons/lineicons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiTrophy1Icon } from '@semantic-icons/lineicons';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiTrophy1Icon],
  template: `
    <svg class="size-6" siTrophy1Icon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The icons can be imported from `@semantic-icons/lineicons`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the word `icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA
npm package: @semantic-icons/lucide-icons
Description: Icons generated based on lucide-icons v0.574.0
Author: Khalil LAGRIDA
Latest version: 0.60.0

# @semantic-icons/lucide-icons

`@semantic-icons/lucide-icons` helps developers to use [Lucide icons](https://lucide.dev/icons) inside [Angular](https://angular.dev) projects.

## Supported versions

| @semantic-icons/lucide-icons | Angular   | Lucide-icons |
| ---------------------------- | --------- | ------------ |
| 0.x.x                        | >= 17.1.0 | 0.462.0      |

## Usage

First, install `@semantic-icons/lucide-icons` from npm:

```sh
npm install @semantic-icons/lucide-icons
```

Now each icon can be imported individually as an Angular component:

```js
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

import { SiBirdIcon } from '@semantic-icons/lucide-icons';

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [SiBirdIcon],
  template: `
    <svg class="text-blue-500 size-6" siBirdIcon></svg>
  `,
  styles: ``,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomePage {}
```

The icons can be imported from `@semantic-icons/lucide-icons`.

Icons use the Angular naming convention and are always prefixed with the word `si` and suffixed with the word `icon`.

## License

MIT © 2024-2026 Khalil LAGRIDA