# @fortawesome/angular-fontawesome

> Angular Fontawesome, an Angular library

Latest version **5.1.0** (published 2026-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fortawesome/angular-fontawesome
pnpm add @fortawesome/angular-fontawesome
yarn add @fortawesome/angular-fontawesome
bun add @fortawesome/angular-fontawesome
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2026-07-02 |
| First published | 2018-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 151.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1532 |
| Maintainers | devoto13, jrjohnson, robmadole, supercodepoet, fortawesome-admin, mwilkerson, jasonlundien, lordofbacon |
| Keywords | angular, font, awesome, fontawesome, icon, svg |

## Links

- npm: https://www.npmjs.com/package/@fortawesome/angular-fontawesome
- Repository: https://github.com/FortAwesome/angular-fontawesome
- Issues: https://github.com/FortAwesome/angular-fontawesome/issues
- npm.io page: https://npm.io/package/@fortawesome/angular-fontawesome

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^7.3.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 5.1.0 (latest) — 2026-07-02
- 0.6.0-alpha.0 (next) — 2019-11-11
- 0.1.0-10 (prerelease) — 2018-05-21
- 5.0.0 — 2026-06-05
- 4.0.0 — 2025-11-24
- 3.0.0 — 2025-08-03
- 2.0.1 — 2025-06-02
- 2.0.0 — 2025-05-31
- 1.0.0 — 2024-11-20
- 0.15.0 — 2024-05-23
- 0.14.1 — 2023-12-23
- 0.14.0 — 2023-11-08
- 0.13.0 — 2023-05-04
- 0.12.1 — 2023-01-09
- 0.12.0 — 2022-11-18
- … 27 more at https://npm.io/package/@fortawesome/angular-fontawesome/versions

## README

<a href="https://fontawesome.com">
  <img align="right" width="100" height="100" alt="Official Javascript Component" src="https://img.fortawesome.com/349cfdf6/official-javascript-component.svg">
</a>

# angular-fontawesome

[![npm](https://img.shields.io/npm/v/@fortawesome/angular-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)

Official Angular component for Font Awesome 5+

## Installation

If you have [FontAwesome Pro](https://fontawesome.com/plans) subscription, make sure to [configure access](https://fontawesome.com/docs/web/setup/packages#_1-configure-access) before following the installation instructions.

> **Note:** Pro+ Icons are only available in Kit Packages
> Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.
> [Read more](https://docs.fontawesome.com/web/setup/use-kit#using-kit-packages).


Using `ng add`:

```
# See Compatibility table below to choose a correct version
$ ng add @fortawesome/angular-fontawesome@<version>
```

Using [Yarn](https://yarnpkg.com)
```
$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@<version>
```

Using [NPM](https://www.npmjs.com/)
```
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>
```

### Compatibility table

| @fortawesome/angular-fontawesome | Angular | Font Awesome      | 
|----------------------------------|---------|-------------------|
| 5.x                              | 22.x    | 5.x && 6.x && 7.x |
| 4.x                              | 21.x    | 5.x && 6.x && 7.x |
| 3.x                              | 20.x    | 5.x && 6.x && 7.x |

See [the compatibility page](./docs/guide/compatibility.md) for older versions.

## Usage

To get up and running using Font Awesome with Angular follow the below steps:

1. Add `FontAwesomeModule` to the `imports` and tie the icon to the property in your component
`src/app/app.component.ts`:

    ```typescript
    import { Component } from '@angular/core';
    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { faCoffee } from '@fortawesome/free-solid-svg-icons';
    
   // Import from Kit Packages (Pro+ Icons)
   // import {faCloud} from "@awesome.me/kit-<KIT_ID>/icons/slab/regular";
   
    
    @Component({
      selector: 'app-root',
      imports: [FontAwesomeModule], // alternatively, individual components can be imported
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      faCoffee = faCoffee;
    }
    ```

1. Use the icon in the template
`src/app/app.component.html`:

    ```html
    <fa-icon [icon]="faCoffee" />
    ```

## Documentation

* [In-depth usage guide](./docs/usage.md)
* [Using other styles](./docs/usage/using-other-styles.md)
* [Full feature list](./docs/usage/features.md)
* [Upgrading instructions](UPGRADING.md)
* [Frequency asked questions](./docs/faq.md)

## Examples

### Stackblitz
Here's a [StackBlitz Starter Sample](https://stackblitz.com/edit/angular-ivy-7jrcne) on how to display Solid, Regular, and Brand icons [using the Icon Library](./docs/usage/icon-library.md#using-the-icon-library).


### Demo application
You can find examples in the `projects/demo` directory. You can follow [the docs to run the demo app](./DEVELOPER.md#setting-up-the-local-environment) on your own machine.

## Contributing
`angular-fontawesome` is a product of the community, you can take a look at the [developer docs](./DEVELOPER.md) to find about more on how to contribute back to the project.

## Contributors

The following contributors have either helped to start this project, have contributed
code, are actively maintaining it (including documentation), or in other ways
being awesome contributors to this project. **We'd like to take a moment to recognize them.**

[<img src="https://github.com/devoto13.png?size=72" alt="devoto13" width="72">](https://github.com/devoto13)
[<img src="https://github.com/zeevkatz.png?size=72" alt="zeevkatz" width="72">](https://github.com/zeevkatz)
[<img src="https://github.com/scttcper.png?size=72" alt="scttcper" width="72">](https://github.com/scttcper)
[<img src="https://github.com/DavidePastore.png?size=72" alt="DavidePastore" width="72">](https://github.com/DavidePastore)
[<img src="https://github.com/donmckenna.png?size=72" alt="donmckenna" width="72">](https://github.com/donmckenna)
[<img src="https://github.com/paustint.png?size=72" alt="paustint" width="72">](https://github.com/paustint)
[<img src="https://github.com/mzellho.png?size=72" alt="mzellho" width="72">](https://github.com/mzellho)
[<img src="https://github.com/elebitzero.png?size=72" alt="elebitzero" width="72">](https://github.com/elebitzero)
[<img src="https://github.com/mcenkar.png?size=72" alt="mcenkar" width="72">](https://github.com/mcenkar)
[<img src="https://github.com/SiddAjmera.png?size=72" alt="SiddAjmera" width="72">](https://github.com/SiddAjmera)
[<img src="https://github.com/stephaniepurvis.png?size=72" alt="stephaniepurvis" width="72">](https://github.com/stephaniepurvis)
[<img src="https://github.com/loicgasser.png?size=72" alt="loicgasser" width="72">](https://github.com/loicgasser)
[<img src="https://github.com/damienwebdev.png?size=72" alt="damienwebdev" width="72">](https://github.com/damienwebdev)
[<img src="https://github.com/ronniebarker.png?size=72" alt="ronniebarker" width="72">](https://github.com/ronniebarker)
[<img src="https://github.com/bhanuhiteshi.png?size=72" alt="bhanuhiteshi" width="72">](https://github.com/bhanuhiteshi)
[<img src="https://github.com/MrSuttonmann.png?size=72" alt="MrSuttonmann" width="72">](https://github.com/MrSuttonmann)
[<img src="https://github.com/ej2.png?size=72" alt="ej2" width="72">](https://github.com/ej2)
[<img src="https://github.com/peterblazejewicz.png?size=72" alt="peterblazejewicz" width="72">](https://github.com/peterblazejewicz)
[<img src="https://github.com/arjenbrandenburgh.png?size=72" alt="arjenbrandenburgh" width="72">](https://github.com/arjenbrandenburgh)
[<img src="https://github.com/athisun.png?size=72" alt="athisun" width="72">](https://github.com/athisun)
[<img src="https://github.com/madebyjeffrey.png?size=72" alt="madebyjeffrey" width="72">](https://github.com/madebyjeffrey)
[<img src="https://github.com/benjamincharity.png?size=72" alt="benjamincharity" width="72">](https://github.com/benjamincharity)
[<img src="https://github.com/NayeBeckham.png?size=72" alt="NayeBeckham" width="72">](https://github.com/NayeBeckham)
[<img src="https://github.com/Nosfistis.png?size=72" alt="Nosfistis" width="72">](https://github.com/Nosfistis)
[<img src="https://github.com/bleistift-zwei.png?size=72" alt="bleistift-zwei" width="72">](https://github.com/bleistift-zwei)
[<img src="https://github.com/igorls.png?size=72" alt="igorls" width="72">](https://github.com/igorls)
[<img src="https://github.com/jasonlundien.png?size=72" alt="jasonlundien" width="72">](https://github.com/jasonlundien)
[<img src="https://github.com/FortAwesome.png?size=72" alt="Font Awesome Team" width="72">](https://github.com/orgs/FortAwesome/people)
[<img src="https://github.com/pankajparkar.png?size=72" alt="pankajparkar" width="72">](https://github.com/pankajparkar)
[<img src="https://github.com/medbenmakhlouf.png?size=72" alt="medbenmakhlouf" width="72">](https://github.com/medbenmakhlouf)
[<img src="https://github.com/Stoffel-KT.png?size=72" alt="Stoffel-KT" width="72">](https://github.com/Stoffel-KT)
[<img src="https://github.com/Ionaru.png?size=72" alt="Ionaru" width="72">](https://github.com/Ionaru)
[<img src="https://github.com/KristofGilis.png?size=72" alt="KristofGilis" width="72">](https://github.com/KristofGilis)
[<img src="https://github.com/cheng93.png?size=72" alt="cheng93" width="72">](https://github.com/cheng93)

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

---
_Source: https://npm.io/package/@fortawesome/angular-fontawesome · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._