Font Awesome

https://docs.fontawesome.com/web
Admin
Font Awesome is a comprehensive icon library and toolkit that provides thousands of scalable vector...
Tokens:87,303
Snippets:994
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Free All Inclusive Package

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

Install the complete Font Awesome Free asset collection.

```bash
npm install --save @fortawesome/fontawesome-free
```

```bash
yarn add @fortawesome/fontawesome-free
```

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

### Install Pro All Inclusive Package

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

Install the complete Font Awesome Pro asset collection.

```bash
npm install --save @fortawesome/fontawesome-pro
```

```bash
yarn add @fortawesome/fontawesome-pro
```

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

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

### Install Free Icon Packages

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

Commands to install individual Free icon style packages.

```bash
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
```

```bash
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
```

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

### Install iOS Pods

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

Install CocoaPods for bare React Native CLI projects to complete the iOS setup.

```bash
cd ios && pod install
```

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

### Install fa CLI

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

Installation commands for the Font Awesome CLI on different operating systems.

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

```powershell
irm https://fontawesome.com/fa-cli/install.ps1 | iex
```

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

### Handle CLI installation visibility

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

A script to toggle the visibility of CLI installation elements based on the user's operating system.

```javascript
(function () {
  var ua = navigator.userAgent
  var platform = (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || ''
  var isWindows = /Win/i.test(platform) || /Windows/i.test(ua)
  if (!isWindows) return
  document.querySelectorAll('.cli-install').forEach(function (el) {
    el.hidden = el.dataset.os !== 'windows'
  })
})()
```

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

### Install Kit Package

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

Install a specific Font Awesome Kit package by replacing KIT_CODE with your unique ID.

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

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

```bash
FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save '@awesome.me/kit-KIT_CODE@latest'
```

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

### Install Free SVG Icon Packages

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

Install the SVG Core package and select Free icon styles.

```bash
# Installing SVG Core for subsetting and base libaries.
npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
```

```bash
# Installing SVG Core for subsetting and base libaries.
yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
```

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

### Install Pro Icon Packages

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

Commands to install individual Pro icon style packages. Requires an active Pro subscription and configured package access.

```bash
npm install @fortawesome/pro-solid-svg-icons
npm install @fortawesome/pro-regular-svg-icons
npm install @fortawesome/pro-light-svg-icons
npm install @fortawesome/pro-thin-svg-icons
npm install @fortawesome/pro-duotone-svg-icons
npm install @fortawesome/duotone-regular-svg-icons
npm install @fortawesome/duotone-light-svg-icons
npm install @fortawesome/duotone-thin-svg-icons
npm install @fortawesome/sharp-solid-svg-icons
npm install @fortawesome/sharp-regular-svg-icons
npm install @fortawesome/sharp-light-svg-icons
npm install @fortawesome/sharp-thin-svg-icons
npm install @fortawesome/sharp-duotone-solid-svg-icons
npm install @fortawesome/sharp-duotone-regular-svg-icons
npm install @fortawesome/sharp-duotone-light-svg-icons
npm install @fortawesome/sharp-duotone-thin-svg-icons
```

```bash
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/duotone-regular-svg-icons
yarn add @fortawesome/duotone-light-svg-icons
yarn add @fortawesome/duotone-thin-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons
yarn add @fortawesome/sharp-duotone-solid-svg-icons
yarn add @fortawesome/sharp-duotone-regular-svg-icons
yarn add @fortawesome/sharp-duotone-light-svg-icons
yarn add @fortawesome/sharp-duotone-thin-svg-icons
```

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

### Install fontawesome-svg-core

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

Install the core package required as a dependency for icon utilities.

```bash
npm i --save @fortawesome/fontawesome-svg-core
```

```bash
yarn add @fortawesome/fontawesome-svg-core
```

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

### Install Claude Code Plugin

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

Commands to add the marketplace and install the Font Awesome plugin for Claude Code.

```bash
claude plugin marketplace add FortAwesome/fontawesome-agent-tools
```

```bash
claude plugin install icons@fontawesome-agent-tools
```

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

### Example .font-awesome.md configuration file

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

This file stores project integration methods, versions, license types, and import conventions. It should be committed to version control to maintain consistency across the team.

```markdown
# Font Awesome Configuration

## Integration

- **Method:** React components via @fortawesome/react-fontawesome
- **Version:** 7.2.0
- **License:** Pro
- **Families:** classic, duotone, sharp, sharp-duotone

## Defaults

- **Style:** solid
- **Family:** classic

## Import Pattern

Individual icon imports added to each component file.

## Conventions

Icons are imported at the top of each component alongside other imports.
```

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

### Install dependencies for bare React Native CLI

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

Install react-native-svg and run pod install for iOS native dependency management.

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

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

### HTML Implementation

Source: https://docs.fontawesome.com/web/add-icons/pseudo-elements

Example of the HTML structure required to render the duotone icon.

```html
<button class="icon-duotone icon-login">Login</button>
```

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

### Install SVG core package

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

Install the core dependency required for icon utilities to function.

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

```bash
yarn add @fortawesome/fontawesome-svg-core
```

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

### Initialize Font Awesome Kit

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

Calls the setup function with your specific Kit URL to activate Font Awesome on your site.

```php
fa_custom_setup_kit('https://kit.fontawesome.com/yourkitcode.js');
```

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

### Install react-fontawesome component

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

Install the official Font Awesome React component using npm or yarn.

```bash
npm i --save @fortawesome/react-fontawesome@latest
```

```bash
yarn add @fortawesome/react-fontawesome@latest
```

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

### Install Pro SVG Icon Packages

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

Install the SVG Core package alongside specific Pro icon styles.

```bash
# Installing SVG Core for subsetting and base libaries.
npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
npm install --save @fortawesome/pro-solid-svg-icons
npm install --save @fortawesome/pro-regular-svg-icons
npm install --save @fortawesome/pro-light-svg-icons
npm install --save @fortawesome/pro-thin-svg-icons

npm install --save @fortawesome/pro-duotone-svg-icons
npm install --save @fortawesome/duotone-regular-svg-icons
npm install --save @fortawesome/duotone-light-svg-icons
npm install --save @fortawesome/duotone-thin-svg-icons

npm install --save @fortawesome/sharp-solid-svg-icons
npm install --save @fortawesome/sharp-regular-svg-icons
npm install --save @fortawesome/sharp-light-svg-icons
npm install --save @fortawesome/sharp-thin-svg-icons

npm install --save @fortawesome/sharp-duotone-solid-svg-icons
npm install --save @fortawesome/sharp-duotone-regular-svg-icons
npm install --save @fortawesome/sharp-duotone-light-svg-icons
npm install --save @fortawesome/sharp-duotone-thin-svg-icons
```

```bash
# Installing SVG Core for subsetting and base libaries.
yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons

yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/duotone-regular-svg-icons
yarn add @fortawesome/duotone-light-svg-icons
yarn add @fortawesome/duotone-thin-svg-icons

yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons

yarn add @fortawesome/sharp-duotone-solid-svg-icons
yarn add @fortawesome/sharp-duotone-regular-svg-icons
yarn add @fortawesome/sharp-duotone-light-svg-icons
yarn add @fortawesome/sharp-duotone-thin-svg-icons
```

```bash
FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/pro-solid-svg-icons
```

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

### NPM Update and Install Commands

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Commands to resolve 404 errors during Kit Package installation by updating the registry reference.

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

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

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

### Install Font Awesome packages

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

Standard installation for Font Awesome core, React Native component, and icon sets.

```bash
npm i --save @fortawesome/fontawesome-svg-core @fortawesome/react-native-fontawesome@latest
npm i --save @fortawesome/free-solid-svg-icons
```

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

### Configure and Load Font Awesome SCSS

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

This example demonstrates how to customize variables, load core styles, and include custom icons within an SCSS project.

```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;
```

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

### Verify npm private repository credentials

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

Example output showing Font Awesome registry and authentication token configuration in .npmrc.

```js
; "user" config from /path/to/.npmrc
# ...
@fortawesome:registry = "https://npm.fontawesome.com/"
//npm.fontawesome.com/:_authToken = REDACTED
```

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

### Verify pnpm private repository credentials

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

Example output showing Font Awesome registry configuration for pnpm.

```js
//npm.fontawesome.com/:_authToken=REDACTED
@fortawesome:registry=https://npm.fontawesome.com/
prefix=/path/to/nodejs/18.13.0/.npm
registry=https://registry.npmjs.org/
user-agent=pnpm/7.29.1 npm/? node/v18.13.0 darwin arm64
# ...
```

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

### Install Vue Font Awesome Package (npm)

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

Install the Font Awesome Vue component package using npm.

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

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

### Install Vue Font Awesome Package (yarn)

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

Install the Font Awesome Vue component package using yarn.

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

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

### HTML Implementation of Kit Icons

Source: https://docs.fontawesome.com/web/add-icons/upload-icons

Example showing how to reference both official Font Awesome icons and custom uploaded icons within an HTML file using a Kit script.

```html
<html>
  <head>
    <!-- Place your Kit's code here -->
    <script src="[YOUR_KIT_CODE]" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- official solid icons -->
    <i class="fa-solid fa-pennant"></i>
    <i class="fa-solid fa-basketball-hoop"></i>
    <i class="fa-solid fa-basketball-ball"></i>

    <!-- official brand icon -->
    <i class="fa-brands fa-dribbble"></i>

    <!-- uploaded icons: reference icons you've uploaded to your Kit -->
    <i class="fa-kit fa-pennant"></i>
    <i class="fa-kit fa-basketball-hoop-broken"></i>
    <i class="fa-kit fa-shaq-dunking"></i>
    <i class="fa-kit-duotone fa-shaq-rapping"></i>
  </body>
</html>
```

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

### Install Font Awesome Skills

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

Use this command to add the Font Awesome agent tools to your project via npx.

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

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

### Install React Native Component and Dependencies

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

Install the React Native component and the required react-native-svg peer dependency.

```bash
npm i --save @fortawesome/react-native-fontawesome@latest react-native-svg
```

```bash
yarn add @fortawesome/react-native-fontawesome@latest react-native-svg
```

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

### Windows NPM Install Command

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Alternative installation command using double quotes to avoid path issues on Windows systems.

```bash
npm install --save "@awesome.me/kit-[KIT_CODE_GOES_HERE]@latest"
```

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

### Install Kit Package

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

Commands to install a Font Awesome Kit package via npm or yarn. Ensure you have configured access to your Kit before running these commands.

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

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

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

### fa-icon()

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

Produces the base style setup for an icon's rendering and configures the icon family and style.

```APIDOC
## fa-icon()

### Description
Produces all of the base style set up for an icon's rendering, plus configuration for a specific icon family and style.

### Arguments
- **$family** (font-family) - Required - Any valid font-family value.
```

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

### Integrate Sharp Solid and Custom Icons via HTML

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

Example of linking Font Awesome Sharp Solid and custom icon CSS files to display icons in an HTML document.

```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>
```

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

### Stacking Icons with Custom Properties

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

Examples of using fa-stack classes to layer icons, including inline CSS custom property overrides for z-index and inverse colors.

```html
<span class="fa-stack fa-2x">
  <i class="fab fa-font-awesome fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
  <i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index: 1;"></i>
</span>
<span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fab fa-font-awesome fa-stack-1x fa-inverse"></i>
</span>
```

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

### Install react-native-svg with Expo

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

For bare CLI projects, ensure you have a reasonably current version of `react-native-svg` installed. Using Expo's installer picks a compatible version automatically.

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

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

### Set Up Font Awesome

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

Commands to initialize Font Awesome in a project, with optional parameters for integration method and framework.

```text
/setup-fa
```

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

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

### Set up the Font Awesome Library

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

Register all icons from a subsetted Kit globally to simplify icon usage in components.

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

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

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

### Install vue-fontawesome component

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

Install the official Font Awesome component for Vue 3 using npm or yarn.

```bash
npm install @fortawesome/vue-fontawesome@latest-3
```

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

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

### Demonstrate Icon Padding with HTML

Source: https://docs.fontawesome.com/web/style/icon-canvas

Displays various icons with background colors to visualize their rendering height and padding.

```html
<div class="fa-3x" style="display: flex; gap: 0.5em; align-items: center; font-family: system-ui;">
  <i class="fa-solid fa-file" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-file-slash" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-eye" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-eye-slash" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-toilet-paper-under" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-toilet-paper-under-slash" style="background: LightSalmon;"></i>
</div>
```

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

### Valid SVG Example

Source: https://docs.fontawesome.com/web/add-icons/upload-icons/prep-icons

A standard example of a valid SVG structure using a viewBox and a single path element.

```html
<svg viewBox="0 0 512 512">
  <path d="M0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0z" />
</svg>
```

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

### Initialize Font Awesome Library

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

Register multiple icon sets and individual icons to the global library in your application's entry point.

```js
import { library } from '@fortawesome/fontawesome-svg-core'

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fass } from '@fortawesome/sharp-solid-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fadt } from '@fortawesome/duotone-thin-svg-icons'
import { fasds } from '@fortawesome/sharp-duotone-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'

library.add(fas, fass, fad, fadt, fasds, faTwitter, faFontAwesome, faHatCowboy, faHatChef)
```

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

### Import Entire Solid Style

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

Import all free solid style icons. Use with caution due to potential bundle size increase. Consider subsetting for better performance.

```js
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)
```

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

### View npm configuration

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

Displays the current npm configuration settings.

```bash
npm config list
```

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

### Run iOS Pod Install

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

For bare `react-native-cli` projects, remember to run `pod install` in the `ios` directory after adding `react-native-svg`. Expo projects do not require this step.

```bash
cd ios && pod install
```

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

### Configure SVG Icons and All Inclusive Packages

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

Standard configuration for accessing SVG icon packages and all-inclusive bundles.

```bash
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
```

```bash
npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
```

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

### Add icons to the library

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

Example of adding a full icon set to the FontAwesome library in a module.

```js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

// ...
```

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

### icon()

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

Individual style-only mixins that produce base style setup for an icon's rendering.

```APIDOC
## icon()

### Description
Individual Style-only mixins that produce all the base style set up for an icon's rendering, plus configuration for a specific icon family and style.

### Arguments
- **N/A** - Family and style are set explicitly with these.
```

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

### Download a kit archive

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

Downloads and unzips a Web-type kit archive to a specified directory.

```shell
fa kit download --kit-token 8812e4e21d --unzip --output kit web
```

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

### Build a Global Icon Library

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

Initialize a library module to register icons once, allowing them to be referenced by string names throughout the application.

```ts
// icons.ts (imported once from App.tsx)
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

library.add(fab, faSquareCheck, faMugSaucer)
```

```tsx
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Beverage = () => (
  <View>
    <FontAwesomeIcon icon="square-check" />
    <Text>Favorite beverage:</Text>
    <FontAwesomeIcon icon="mug-saucer" />
    <Text>Same icon, different syntax:</Text>
    <FontAwesomeIcon icon="fa-mug-saucer" />
  </View>
)
```

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

### Apply Pull-Start Alignment

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

Use the fa-pull-start class to align an icon to the start of a text block.

```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.
```

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

### Accessing multiple icons by prefix and name

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Demonstrates accessing various icons across different styles using the byPrefixAndName object.

```javascript
byPrefixAndName.fas['house']
byPrefixAndName.far['square']
byPrefixAndName.fass['sword']
byPrefixAndName.fab['font-awesome']
```

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

### Icon Element Replacement Example

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

Shows the transformation of an <i> icon tag into an <svg> element by the Font Awesome library.

```html
<i class="fa-solid fa-coffee" data-fa-mask="fa-solid fa-circle"></i>
```

```html
<svg
  class="svg-inline--fa fa-coffee fa-w-20"
  aria-hidden="true"
  data-fa-i2svg=""
  data-prefix="fa-solid"
  data-icon="coffee"
  role="img"
  viewBox="0 0 640 512">
  <path
    fill="currentColor"
    d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"></path>
</svg>
<!-- <i class="fa-solid fa-coffee"></i> -->
```

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

### Compare Font Awesome Version Syntax

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

Shows the transition from legacy v4 class syntax to modern v5+ solid style syntax.

```html
<i class="fa fa-user"></i>
```

```html
<i class="fa-solid fa-user"></i>
```

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

### Using Icon Aliases in HTML

Source: https://docs.fontawesome.com/web/add-icons/how-to

Demonstrates how aliases allow both old and new icon names to render the same icon, ensuring backward compatibility.

```html
<!-- All of these code snippets will render the same Solid icon thanks to aliases. -->
<i class="fa-solid fa-cutlery"></i>
<i class="fa-solid fa-utensils"></i>
<i class="fas fa-utensils"></i>

<!-- All of these code snippets will render the same Sharp Solid icon thanks to aliases. -->
No
<i class="fa-sharp fa-solid fa-close"></i>
No
```

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

### Verify yarn private repository credentials

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

Example output showing Font Awesome scope configuration in .yarnrc.yml.

```js
YN0000: npmScopes, /path/to/.yarnrc.yml   Map(1) {
  'fortawesome' => Map(6) {
    'npmAlwaysAuth' => true,
    'npmAuthIdent' => null,
    'npmAuthToken' => 'REDACTED',
    'npmAuditRegistry' => null,
    'npmPublishRegistry' => null,
    'npmRegistryServer' => 'https://npm.fontawesome.com/'
  }
}
```

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

### Importing Free Icon Styles

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

Add all icons from the Free Solid, Regular, and Brands packages to the library for global access.

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

/* import all the icons in Free Solid, Free Regular, and Brands styles */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
```

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

### Monotone SVG Path Structure

Source: https://docs.fontawesome.com/web/add-icons/upload-icons/prep-icons

Example of an SVG icon structured as a single compound path for compatibility with the upload system.

```html
<svg viewBox="0 0 20 20">
  <path
    d="M3,5c0-.553.447-1,1-1h12c.553,0,1,.447,1,1s-.447,1-1,1H4c-.553,0-1-.447-1-1ZM3,10c0-.553.447-1,1-1h12c.553,0,1,.447,1,1s-.447,1-1,1H4c-.553,0-1-.447-1-1ZM17,15c0,.553-.447,1-1,1H4c-.553,0-1-.447-1-1s.447-1,1-1h12c.553,0,1,.447,1,1Z" />
</svg>
```

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

### Displaying Icons via Unicode

Source: https://docs.fontawesome.com/web/add-icons/svg-unicodes

Examples of using Unicode values within <i> elements to render Font Awesome icons.

```html
<i style="padding: 2px;" class="fa-solid fa-2x">&#x42;</i>
  <i style="padding: 2px;" class="fa-regular fa-2x fa-spin">&#xf436;</i>
  <i style="padding: 2px;" class="fa-duotone fa-solid fa-2x fa-shake fa-bowling-pins"></i>
  <i style="padding: 2px;" class="fa-light fa-2x">&#x31;</i>
  <i style="padding: 2px;" class="fa-sharp fa-solid fa-2x">&#x58;</i>
  <i style="padding: 2px;" class="fa-sharp-duotone fa-solid fa-2x fa-turkey"></i>
```

```html
<i class="fa-solid fa-2x">&#x42;</i>
<i class="fa-regular fa-2x fa-spin">&#xf436;</i>
<i class="fa-duotone fa-solid fa-2x fa-shake">&#xf437;</i>
<i class="fa-light fa-2x">&#x31;</i>
<i class="fa-sharp fa-solid fa-2x">&#x58;</i>
<i class="fa-sharp-duotone fa-solid fa-2x">&#xf725;</i>
```

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

### Importing the all icons array

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Import the all array containing every icon available in the Kit.

```javascript
import { all } from '@awesome.me/kit-KIT_CODE/icons'
```

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

### Define Radial Gradients in SVG

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

Examples of radial gradients using various configurations for center, radius, opacity, and focal points.

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="48" style="margin-right: 1.5rem">
    <defs>
      <radialGradient id="docs-radial1" cx="30%" cy="30%" r="70%">
        <stop offset="0%" stop-color="#FDF497" />
        <stop offset="45%" stop-color="#FD5949" />
        <stop offset="60%" stop-color="#D6249F" />
        <stop offset="90%" stop-color="#285AEB" />
      </radialGradient>
    </defs>
    <path fill="url(#docs-radial1)" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
  </svg>
```

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" height="48" overflow="visible" style="margin-right: 1.5rem">
    <defs>
      <radialGradient id="docs-radialOpacity" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#f7ff00" stop-opacity="1" />
        <stop offset="100%" stop-color="#db36a4" stop-opacity="0.8" />
      </radialGradient>
    </defs>
    <path fill="url(#docs-radialOpacity)" d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.8L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.2L349.4 44.6z"/>
  </svg>
```

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="48">
    <defs>
      <radialGradient id="docs-radialFocal" cx="50%" cy="50%" r="60%" fx="30%" fy="30%">
        <stop offset="0%" stop-color="#ffffff" />
        <stop offset="50%" stop-color="#60a5fa" />
        <stop offset="100%" stop-color="#1e3a8a" />
      </radialGradient>
    </defs>
    <path fill="url(#docs-radialFocal)" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
  </svg>
```
Tokens:
Raw