Font Awesome

https://docs.fontawesome.com/
Admin
Font Awesome is a comprehensive icon library and toolkit that provides thousands of scalable vector...
Tokens:277,460
Snippets:1,944
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install and run http-server

Source: https://docs.fontawesome.com/apis/javascript/plugins

Installs the http-server package and starts a local HTTP server to serve the project.

```bash
npm install --save-dev http-server
npx http-server
```

--------------------------------

### Run /setup-fa with method and framework

Source: https://docs.fontawesome.com/web/use-with/ai-agent-tools

Nudge the setup tool toward a specific integration method and framework. The tool will still confirm before installing anything.

```text
/setup-fa method:kit framework:react
```

--------------------------------

### Run /setup-fa

Source: https://docs.fontawesome.com/web/use-with/ai-agent-tools

Run the setup tool to add Font Awesome to a project from scratch. It detects the framework, recommends an integration method, installs it, and writes the initial .font-awesome.md file.

```text
/setup-fa
```

--------------------------------

### Example Response for GET /releases/7.2.0/icons?license=pro&page=80&page_size=2

Source: https://docs.fontawesome.com/apis/rest

JSON response showing two icons with their family styles, aliases, and pagination metadata. The familyStylesByLicense.pro arrays are trimmed for readability; real responses can list 16 or more styles. The license parameter filters which icons are returned, not the variants listed per icon.

```json
{
  "icons": [
    {
      "aliases": null,
      "familyStylesByLicense": {
        "free": [],
        "pro": [
          { "family": "classic", "prefix": "fal", "shorthand": "light", "style": "light" },
          { "family": "classic", "prefix": "far", "shorthand": "regular", "style": "regular" },
          { "family": "classic", "prefix": "fas", "shorthand": "solid", "style": "solid" },
          { "family": "classic", "prefix": "fat", "shorthand": "thin", "style": "thin" },
          { "family": "duotone", "prefix": "fad", "shorthand": "duotone", "style": "solid" },
          { "family": "sharp", "prefix": "fass", "shorthand": "sharp-solid", "style": "solid" },
          { "family": "sharp-duotone", "prefix": "fasds", "shorthand": "sharp-duotone-solid", "style": "solid" }
        ]
      },
      "id": "bar-progress-three-quarters",
      "label": "Bar Progress Three Quarters",
      "unicodeHex": "e6a9"
    },
    {
      "aliases": {
        "names": [],
        "unicodes": { "composite": [], "primary": [], "secondary": ["10f464"] }
      },
      "familyStylesByLicense": {
        "free": [],
        "pro": [
          { "family": "classic", "prefix": "fal", "shorthand": "light", "style": "light" },
          { "family": "classic", "prefix": "far", "shorthand": "regular", "style": "regular" },
          { "family": "classic", "prefix": "fas", "shorthand": "solid", "style": "solid" },
          { "family": "classic", "prefix": "fat", "shorthand": "thin", "style": "thin" },
          { "family": "duotone", "prefix": "fad", "shorthand": "duotone", "style": "solid" },
          { "family": "sharp", "prefix": "fass", "shorthand": "sharp-solid", "style": "solid" },
          { "family": "sharp-duotone", "prefix": "fasds", "shorthand": "sharp-duotone-solid", "style": "solid" }
        ]
      },
      "id": "barcode-read",
      "label": "Barcode Read",
      "unicodeHex": "f464"
    }
  ],
  "page": 80,
  "pageSize": 2,
  "totalIconCount": 2348,
  "totalPageCount": 1174
}
```

--------------------------------

### GET /releases/:version/icons-minimal example response

Source: https://docs.fontawesome.com/apis/rest

Example response for GET /releases/7.2.0/icons-minimal?page=80&page_size=2. Shows the minimal icon fields: id and familyStylesByLicense grouped by license. The per-icon pro arrays are trimmed for readability; real responses can list 16 or more prefixes.

```json
{
  "icons": [
    {
      "familyStylesByLicense": {
        "free": [],
        "pro": [
          { "prefix": "fal" },
          { "prefix": "far" },
          { "prefix": "fas" },
          { "prefix": "fat" },
          { "prefix": "fad" },
          { "prefix": "fass" },
          { "prefix": "fasds" }
        ]
      },
      "id": "arrow-rotate-right-30"
    },
    {
      "familyStylesByLicense": {
        "free": [{ "prefix": "fas" }],
        "pro": [
          { "prefix": "fal" },
          { "prefix": "far" },
          { "prefix": "fas" },
          { "prefix": "fat" },
          { "prefix": "fad" },
          { "prefix": "fass" },
          { "prefix": "fasds" }
        ]
      },
      "id": "arrow-trend-down"
    }
  ],
  "page": 80,
  "pageSize": 2,
  "totalIconCount": 4318,
  "totalPageCount": 2159
}
```

--------------------------------

### Install Kit Package

Source: https://docs.fontawesome.com/apis/javascript/icon-library

Install a Font Awesome Kit package using the kit code placeholder.

```bash
npm i --save '@awesome.me/kit-KIT_CODE'
```

--------------------------------

### Install Free Icon Styles

Source: https://docs.fontawesome.com/apis/javascript/icon-library

Install the free icon style packages for Font Awesome.

```bash
# Free icons styles
npm install @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
```

--------------------------------

### Install @fortawesome/fontawesome-svg-core

Source: https://docs.fontawesome.com/apis/javascript/icon-library

Install the core package that provides functionality but no icon content.

```bash
npm install @fortawesome/fontawesome-svg-core
```

--------------------------------

### Install Font Awesome agent tools with npx skills add

Source: https://docs.fontawesome.com/web/use-with/ai-agent-tools

Installs Font Awesome's agent tools as Skills into your project. After installation, four new skills become available in agent sessions: /setup-fa, /suggest-icon, /add-icon, and /fa-help.

```bash
npx skills add FortAwesome/fontawesome-agent-tools
```

--------------------------------

### Install Pro Icon Styles

Source: https://docs.fontawesome.com/apis/javascript/icon-library

Install all Pro icon style packages for Font Awesome.

```bash
# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/duotone-regular-svg-icons
npm i --save @fortawesome/duotone-light-svg-icons
npm i --save @fortawesome/duotone-thin-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons
npm i --save @fortawesome/sharp-thin-svg-icons
npm i --save @fortawesome/sharp-duotone-solid-svg-icons
npm i --save @fortawesome/sharp-duotone-regular-svg-icons
npm i --save @fortawesome/sharp-duotone-light-svg-icons
npm i --save @fortawesome/sharp-duotone-thin-svg-icons
```

--------------------------------

### Install react-native-svg and run pod install for bare React Native CLI

Source: https://docs.fontawesome.com/web/use-with/react-native/use-with

For bare `react-native-cli` projects, install `react-native-svg` directly and run `pod install` to finish the iOS setup. Then follow the setup page to install the remaining Font Awesome packages.

```bash
npm i --save react-native-svg
cd ios && pod install
```

--------------------------------

### Install Kit Package with yarn

Source: https://docs.fontawesome.com/web/use-with/react

Install the Font Awesome Kit package using yarn. Requires prior setup of a Kit and enabling package installation.

```bash
yarn add @awesome.me/kit-KIT_CODE@latest
```

--------------------------------

### Install Kit Package with npm

Source: https://docs.fontawesome.com/web/use-with/react

Install the Font Awesome Kit package using npm. Requires prior setup of a Kit and enabling package installation.

```bash
npm install @awesome.me/kit-KIT_CODE@latest
```

--------------------------------

### Create and enter the fa-lite project directory

Source: https://docs.fontawesome.com/apis/javascript/plugins

Initializes a new project directory named 'fa-lite' and navigates into it.

```bash
mkdir fa-lite
cd fa-lite
```

--------------------------------

### Install react-native-svg with Expo

Source: https://docs.fontawesome.com/web/use-with/react-native/use-with

Use Expo's installer to add the peer dependency `react-native-svg` so you get a compatible version. Expo manages native dependencies, so no `pod install` is needed.

```bash
npx expo install react-native-svg
```

--------------------------------

### Import solid and sharp-thin styles with @use

Source: https://docs.fontawesome.com/upgrade/scss

Shows how to import the styles used in the V7 syntax example. Loads the solid and sharp-thin styles with aliases fa-solid and fa-sharp-thin.

```css
@use './fontawesome/solid' as fa-solid;
@use './fontawesome/sharp-thin' as fa-sharp-thin;
```

--------------------------------

### http-server startup output

Source: https://docs.fontawesome.com/apis/javascript/plugins

Shows the expected output from starting http-server, including the available URLs and server settings.

```bash
Starting up http-server, serving ./

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://127.51.68.120:8080
  http://192.168.4.22:8080
  http://192.168.4.42:8080
Hit CTRL-C to stop the server
```

--------------------------------

### Setting Up the Library

Source: https://docs.fontawesome.com/web/use-with/react-native/add-icons

Shows how to set up the Font Awesome Library with all icons from a Kit, enabling string-based icon references.

```ts
// icons.ts (or App.tsx)
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

library.add(...all)
```

--------------------------------

### Install Rollup and Font Awesome dependencies (Pro SVG Icon Package)

Source: https://docs.fontawesome.com/apis/javascript/plugins

Installs Rollup plugins and Font Awesome packages for the Pro SVG Icon Package setup. Requires a Pro Plan and Pro Package Token.

```bash
npm install --save-dev rollup @rollup/plugin-node-resolve rollup-plugin-terser
npm i --save-dev @fortawesome/fontawesome-svg-core @fortawesome/pro-solid-svg-icons
```

--------------------------------

### Install Rollup and Font Awesome dependencies (Kit Package)

Source: https://docs.fontawesome.com/apis/javascript/plugins

Installs Rollup plugins and Font Awesome packages for the Kit Package setup. Requires a Pro Plan and Pro Package Token for the Pro SVG icon package.

```bash
npm install --save-dev rollup @rollup/plugin-node-resolve rollup-plugin-terser
npm i --save-dev @fortawesome/fontawesome-svg-core
npm i --save-dev '@awesome.me/kit-KIT_CODE'
```

--------------------------------

### Initialize npm project

Source: https://docs.fontawesome.com/apis/javascript/plugins

Creates a package.json file in the fa-lite directory.

```bash
npm init -y
```

--------------------------------

### Example project using Sharp Solid and custom icons

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

HTML example showing how to include Font Awesome Sharp Solid and custom icon CSS files in a project. The custom icons are used with the 'fa-kit' class.

```html
<head>
  <!-- Our project just needs Font Awesome Sharp Solid + our Custom Icons -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/custom-icons.css" rel="stylesheet" />
</head>
<body>
  <!-- uses sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>
  <!-- uses Kit custom icon style -->
  <i class="fa-kit fa-your-custom-icon-name"></i>
</body>
```

--------------------------------

### Install Pro All Inclusive Package with Environment Variable Token

Source: https://docs.fontawesome.com/web/setup/packages

Install the Pro All Inclusive package using an environment variable for the package token. This provides authentication without configuration.

```bash
FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/fontawesome-pro
```

--------------------------------

### HTML example using Sharp Solid and custom icons from a downloaded Kit

Source: https://docs.fontawesome.com/web/setup/host-yourself/svg-js

Example HTML page that loads Font Awesome Sharp Solid and custom icons from a downloaded Kit. It includes the required script tags for sharp-solid.js, custom-icons.js, and fontawesome.js, and demonstrates using the fa-sharp fa-solid and fa-kit classes for icons.

```html
<head>
  <!-- Our project just needs Font Awesome Sharp Solid + our Custom Icons -->
  <script defer src="/your-path-to-fontawesome/js/sharp-solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/custom-icons.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
</head>
<body>
  <!-- uses sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>
  <!-- uses Kit custom icon style -->
  <i class="fa-kit fa-your-custom-icon-name"></i>
</body>
```

--------------------------------

### Pulled icon with fa-pull-start for pull quotes

Source: https://docs.fontawesome.com/web/style/pull

Use fa-pull-start to float the icon to the start (left in LTR) and wrap text around it. The example shows a quote-left icon with fa-2x and fa-pull-start classes.

```html
<i class="fa-solid fa-quote-left fa-2x fa-pull-start"></i> Gatsby believed in the green light, the orgastic future that
year by year recedes before us. It eluded us then, but that's no matter — tomorrow we will run faster, stretch our arms
further&hellip; And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
```

--------------------------------

### Example response for GET /releases

Source: https://docs.fontawesome.com/apis/rest

Shows the JSON response from the /releases endpoint, trimmed to the three most recent releases as of version 7.2.0. Each entry includes the release date, an isLatest flag, and the version string.

```json
{
  "releases": [
    {
      "date": "2025-08-28",
      "isLatest": false,
      "version": "7.0.1"
    },
    {
      "date": "2025-09-29",
      "isLatest": false,
      "version": "7.1.0"
    },
    {
      "date": "2026-02-04",
      "isLatest": true,
      "version": "7.2.0"
    }
  ]
}
```

--------------------------------

### GET /releases/:version/family-styles

Source: https://docs.fontawesome.com/apis/rest

Returns every family-style available in the given release, with its prefix and shorthand. Use this to enumerate the styles a release supports, for example to populate a UI that lets users pick a family and style of icons to preview.

```APIDOC
## GET /releases/:version/family-styles

### Description
Returns every family-style available in the given release, with its prefix and shorthand. Use this to enumerate the styles a release supports — for example, to populate a UI that lets users pick a family and style of icons to preview.

### Method
GET

### Endpoint
/releases/:version/family-styles

### Parameters
#### Path Parameters
- **version** (string) - Required - The release version identifier.

### Response
#### Success Response (200)
- **familyStyles** (array) - List of family-style objects.
  - **family** (string) - The family name (e.g., classic, duotone).
  - **prefix** (string) - The CSS prefix (e.g., fas, fab).
  - **shorthand** (string) - The shorthand name (e.g., solid, brands).
  - **style** (string) - The style name (e.g., solid, brands).

#### Response Example
```json
{
  "familyStyles": [
    {
      "family": "classic",
      "prefix": "fas",
      "shorthand": "solid",
      "style": "solid"
    },
    {
      "family": "classic",
      "prefix": "fab",
      "shorthand": "brands",
      "style": "brands"
    },
    {
      "family": "duotone",
      "prefix": "fad",
      "shorthand": "duotone",
      "style": "solid"
    },
    {
      "family": "sharp-duotone",
      "prefix": "fasds",
      "shorthand": "sharp-duotone-solid",
      "style": "solid"
    },
    {
      "family": "notdog-duo",
      "prefix": "fands",
      "shorthand": "notdog-duo-solid",
      "style": "solid"
    }
  ]
}
```
```

--------------------------------

### Compile a downloaded Kit with custom icons using SCSS

Source: https://docs.fontawesome.com/web/use-with/scss

Use this SCSS setup to compile a downloaded Kit with custom icons. It customizes the font path, loads Font Awesome core and helpers, then imports the individual styles (solid, brands, duotone, sharp-duotone) and the custom-icons partial. Requires the Kit version to be v7 or at least 6.4 to download.

```scss
// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path
  $font-path: '../webfonts'
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// load individual Font Awesome styles that you plan to use in your project
@use './fontawesome/solid' as fa-solid;
@use './fontawesome/brands' as fa-brands;
@use './fontawesome/duotone' as fa-duotone;
@use './fontawesome/sharp-duotone' as fa-sharp-duotone;

// load your custom icons
@use './fontawesome/custom-icons' as fa-custom-icons;
```

--------------------------------

### Shallow Import Example (Not Recommended)

Source: https://docs.fontawesome.com/web/use-with/react-native/add-icons

Shows the non-recommended way to import an icon from the style package root, which pulls in the entire package.

```js
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'
```

--------------------------------

### Install fa CLI on macOS/Linux

Source: https://docs.fontawesome.com/web/use-with/fa-cli

Install the fa CLI on macOS or Linux using the official install script. Requires curl and bash.

```shell
curl --proto '=https' --tlsv1.2 -fsSL https://fontawesome.com/fa-cli/install.sh | bash
```

--------------------------------

### Install vue-fontawesome for Nuxt

Source: https://docs.fontawesome.com/web/use-with/vue/use-with

Install the vue-fontawesome component for Nuxt using either npm or yarn. Both commands install the latest version 3 of the package.

```bash
npm i --save @fortawesome/vue-fontawesome@latest-3
```

```bash
yarn add @fortawesome/vue-fontawesome@latest-3
```
Tokens:
Raw