Font Awesome Free Brands SVG Icons

Font Awesome Free Brands SVG Icons provides a comprehensive collection of 550 brand and company SVG icons for web and desktop applications. Each icon is exported as a JavaScript module containing SVG path data, making them easy to integrate into modern web applications and frameworks with Font Awesome's SVG with JavaScript implementation.

Package Information

• Package Name: @fortawesome/free-brands-svg-icons
• Package Type: npm
• Language: JavaScript/TypeScript
• Installation: npm install @fortawesome/free-brands-svg-icons

Core Imports

ES modules (recommended):

import { faGithub, faTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons";

Import the complete icon pack:

import { fab } from "@fortawesome/free-brands-svg-icons";

CommonJS:

const { faGithub, faTwitter, faFacebook } = require("@fortawesome/free-brands-svg-icons");
const { fab } = require("@fortawesome/free-brands-svg-icons");

Basic Usage

import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { library, dom } from "@fortawesome/fontawesome-svg-core";

// Add icons to the library
library.add(faGithub, faTwitter);

// Convert i tags to SVG
dom.watch();

// In your HTML:
// <i class="fab fa-github"></i>
// <i class="fab fa-twitter"></i>

With React:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

function MyComponent() {
  return <FontAwesomeIcon icon={faGithub} />;
}

Capabilities

Individual Icon Exports

Each of the 550 brand icons is exported as an individual constant following the pattern fa[IconName].

export const faGithub: IconDefinition;
export const faTwitter: IconDefinition;
export const faFacebook: IconDefinition;
export const faGoogle: IconDefinition;
export const faApple: IconDefinition;
export const faMicrosoft: IconDefinition;
export const faAmazon: IconDefinition;
export const faLinkedin: IconDefinition;
export const faInstagram: IconDefinition;
export const faYoutube: IconDefinition;
// ... and 540 more icons

Icon Pack Export

Complete collection of all brand icons as a single object.

export const fab: IconPack;

Legacy Alias Support

Many icons include legacy aliases for backward compatibility.

export const faGithubSquare: IconDefinition; // Alias for faSquareGithub
export const faFacebookSquare: IconDefinition; // Alias for faSquareFacebook
export const faTwitterSquare: IconDefinition; // Alias for faSquareTwitter
export const faBehanceSquare: IconDefinition; // Alias for faSquareBehance

Package Constants

export const prefix: IconPrefix; // Always "fab" for brand icons

Complete Icon List

All 550 available brand icons organized alphabetically:

A-C Icons

• Accessibility & Tools: faAccessibleIcon, faAutoprefixer
• Cloud & Hosting: faAws, faCloudflare, faCloudscale, faCloudsmith, faCloudversify, faDigitalOcean
• Communication: faAngrycreative, faDiscord, faSlack, faSkype, faTeamspeak, faTelegram, faWhatsapp
• Cryptocurrency: faBitcoin, faBtc, faEthereum
• Development: faAndroid, faAngular, faBootstrap, faCodepen, faGithub, faGitlab, faNode, faNodeJs, faReact, faVuejs
• Finance: faAmazonPay, faApplePay, faPaypal, faStripe, faGooglePay, faCashApp
• Creative Commons: faCreativeCommons, faCreativeCommonsBy, faCreativeCommonsNc, faCreativeCommonsNd, faCreativeCommonsPd, faCreativeCommonsSa, faCreativeCommonsZero

D-H Icons

• Design & Creative: faBehance, faDribbble, faFigma, faSketch, faUnsplash
• E-commerce: faAmazon, faEbay, faEtsy, faShopify
• Entertainment: faSpotify, faYoutube, faTwitch, faNapster, faDeezer, faTidal
• Gaming: faPlaystation, faXbox, faDiscord, faSteam, faTwitch, faNintendoSwitch
• Google Services: faGoogle, faGoogleDrive, faGooglePlay, faGooglePlus, faGoogleScholar, faAndroid

I-O Icons

• Linux Distributions: faDebian, faFedora, faFreebsd, faOpensuse, faRedhat, faSuse, faUbuntu
• Media & News: faMedium, faFlickr, faVimeo, faImdb, faHackerNews, faReddit
• Microsoft: faMicrosoft, faWindows, faSkype, faLinkedin
• Online Services: faDropbox, faEvernote, faNotion, faTrademarks

P-Z Icons

• Programming Languages: faJs, faHtml5, faCss3, faPython, faJava, faPhp, faSwift, faRust
• Social Media: faFacebook, faTwitter, faInstagram, faLinkedin, faTiktok, faSnapchat, faPinterest, faReddit
• Version Control: faGithub, faGitlab, faBitbucket, faGit
• Web Browsers: faChrome, faFirefox, faEdge, faSafari, faOpera, faInternetExplorer

Icon Structure

Each icon export is an IconDefinition object:

export const faGithub: IconDefinition;
export const faTwitter: IconDefinition;
// ... all other icons follow the same pattern

Types

import {
  IconDefinition,
  IconLookup,
  IconName,
  IconPrefix,
  IconPack
} from "@fortawesome/fontawesome-common-types";

type IconPrefix = "fab";
type IconName = string; // Kebab-case icon names like "github", "twitter", etc.

interface IconPack {
  [key: string]: IconDefinition;
}

interface IconDefinition {
  prefix: IconPrefix;
  iconName: IconName;
  icon: [
    number, // width
    number, // height
    string[], // ligatures/aliases
    string, // unicode
    string // svgPathData
  ];
}

interface IconLookup {
  prefix: IconPrefix;
  iconName: IconName;
}

Advanced Usage Examples

Tree Shaking with Individual Imports

// Only imports the specific icons you need
import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";

library.add(faGithub, faTwitter);

Dynamic Icon Loading

import { fab } from "@fortawesome/free-brands-svg-icons";

// Access any icon dynamically
const iconName = "github";
const icon = fab[`fa${iconName.charAt(0).toUpperCase() + iconName.slice(1)}`];

Vue.js Integration

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";

library.add(faGithub, faTwitter);

// In template:
// <font-awesome-icon :icon="['fab', 'github']" />

Angular Integration

import { FaIconLibrary } from "@fortawesome/angular-fontawesome";
import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";

constructor(library: FaIconLibrary) {
  library.addIcons(faGithub, faTwitter);
}

// In template:
// <fa-icon [icon]="['fab', 'github']"></fa-icon>

Icon Categories

The package includes icons from these major categories:

• Technology Companies: Apple, Microsoft, Google, Amazon, IBM, Oracle, Adobe
• Social Media: Facebook, Twitter, Instagram, LinkedIn, TikTok, Snapchat, Pinterest
• Development Tools: GitHub, GitLab, Docker, Jenkins, npm, Yarn, Webpack
• Cloud Providers: AWS, Cloudflare, DigitalOcean, Azure, Google Cloud
• Communication: Slack, Discord, Telegram, WhatsApp, Skype, Zoom
• Entertainment: Spotify, YouTube, Netflix, Twitch, Steam, PlayStation, Xbox
• E-commerce: Amazon, eBay, Shopify, Stripe, PayPal, Square
• Design Tools: Figma, Sketch, Adobe Creative Suite, Canva, Dribbble, Behance
• Operating Systems: Windows, macOS, Linux distributions (Ubuntu, Debian, etc.)
• Browsers: Chrome, Firefox, Safari, Edge, Opera
• Programming Languages: JavaScript, Python, Java, PHP, Swift, Rust, Go

Installation and Dependencies

npm install @fortawesome/free-brands-svg-icons

The package requires @fortawesome/fontawesome-common-types as a peer dependency for TypeScript definitions.

For usage with frameworks, you'll also need framework-specific packages:

• React: @fortawesome/react-fontawesome
• Vue: @fortawesome/vue-fontawesome
• Angular: @fortawesome/angular-fontawesome