# @fortawesome/fa-icon-chooser

> Font Awesome Icon Chooser

Latest version **0.11.0** (published 2026-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fortawesome/fa-icon-chooser
pnpm add @fortawesome/fa-icon-chooser
yarn add @fortawesome/fa-icon-chooser
bun add @fortawesome/fa-icon-chooser
```

## Health

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

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

Warnings: low downloads; large bundle; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.11.0 |
| Published | 2026-07-17 |
| First published | 2021-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 23 |
| Maintainers | devoto13, jrjohnson, robmadole, supercodepoet, fortawesome-admin, mwilkerson, jasonlundien, lordofbacon |

## Links

- npm: https://www.npmjs.com/package/@fortawesome/fa-icon-chooser
- Repository: https://github.com/FortAwesome/fa-icon-chooser
- Homepage: https://github.com/FortAwesome/fa-icon-chooser#readme
- Issues: https://github.com/FortAwesome/fa-icon-chooser/issues
- npm.io page: https://npm.io/package/@fortawesome/fa-icon-chooser

## Recent versions

- 0.11.0 (latest) — 2026-07-17
- 0.10.0-2 (pre) — 2025-12-10
- 0.9.0-2 (alpha) — 2025-05-24
- 0.3.0-rc1 (next) — 2022-01-26
- 0.10.2 — 2026-05-05
- 0.10.0 — 2026-04-01
- 0.9.1 — 2025-07-22
- 0.9.0 — 2025-07-22
- 0.9.0-3 — 2025-07-21
- 0.9.0-1 — 2025-05-23
- 0.8.0 — 2025-02-14
- 0.8.0-7 — 2025-02-14
- 0.8.0-5 — 2025-02-13
- 0.8.0-4 — 2025-02-13
- 0.8.0-3 — 2025-02-13
- … 11 more at https://npm.io/package/@fortawesome/fa-icon-chooser/versions

## README

# fa-icon-chooser web component

## Usage

Add it to your JavaScript bundle:

```
npm install --save @fortawesome/fa-icon-chooser
```

After the resulting JavaScript bundle has been loaded in the DOM, you can
mount an `fa-icon-chooser` in the DOM. Suppose your HTML has a container `div`:

```
<div id="fa-icon-chooser-container"></div>
```

Then you could write JavaScript like this:

```js
function handleQuery(query) {
  // some function that handles queries
}

function getUrlText(url) {
  // some function that handles GET requests
}

function handleResult(event) {
  const result = event && event.detail;

  if (result) {
    console.log(`<i class"${result.prefix} ${result.iconName}">`);
  }
}

window.addEventListener('DOMContentLoaded', event => {
  const container = document.querySelector('#fa-icon-chooser-container');
  const el = document.createElement('fa-icon-chooser');
  el.handleQuery = handleQuery;
  el.getUrlText = getUrlText;
  el.addEventListener('finish', handleResult);
  container.appendChild(el);
});
```

See the `fa-icon-chooser` [API Reference](src/components/fa-icon-chooser/readme.md)
for details about what you'd need to implement in
`handleQuery()`, `getUrlText()`, and `handleResult()`.

You can also look at some example implementations in this repo's [development runtime code](../../dev/runtime.js).

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