or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Font Awesome Free Solid SVG Icons

Font Awesome Free Solid SVG Icons provides JavaScript/TypeScript definitions for 1,979 professional-quality SVG icons in the solid style. Each icon is exported as an IconDefinition object containing SVG path data, dimensions, and metadata for scalable vector icon rendering without font dependencies.

Package Information

Package Name: @fortawesome/free-solid-svg-icons
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install @fortawesome/free-solid-svg-icons
Dependencies: @fortawesome/fontawesome-common-types@7.0.1

Core Imports

import { fas, faHeart, faUser, faHouse } from "@fortawesome/free-solid-svg-icons";

For CommonJS:

const { fas, faHeart, faUser, faHouse } = require("@fortawesome/free-solid-svg-icons");

Individual icon imports:

import { faHeart } from "@fortawesome/free-solid-svg-icons/faHeart";

Basic Usage

import { faHeart, faUser, faHouse } from "@fortawesome/free-solid-svg-icons";

// Access icon definition properties
console.log(faHeart.iconName);    // "heart"
console.log(faHeart.prefix);      // "fas"
console.log(faHeart.icon[0]);     // 512 (width)
console.log(faHeart.icon[1]);     // 512 (height)
console.log(faHeart.icon[4]);     // SVG path data

// Use with Font Awesome library (typical usage)
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faHeart, faUser, faHouse);

// Or import all icons at once
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas);

Architecture

The package is organized around these key concepts:

Icon Definitions: Each icon is an IconDefinition object containing complete SVG and metadata
Icon Pack: The fas export provides access to all 1,979 icons as a single object
Individual Exports: Every icon is also available as a named export for tree-shaking
File-level Exports: Each icon can be imported from its own file for maximum bundle efficiency
Type Safety: Full TypeScript definitions ensure type safety and IDE support

Capabilities

Icon Pack

Complete collection of all 1,979 solid icons accessible as a single object.

const fas: IconPack;

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

Prefix Constant

String constant identifying the icon style prefix.

const prefix: IconPrefix;

type IconPrefix = "fas" | "far" | "fal" | "fat" | "fad" | "fab";

Individual Icon Definitions

Each of the 1,979 icons is exported as an individual IconDefinition. Key icons include:

Core UI Icons

const faHeart: IconDefinition;          // Heart/favorite icon
const faUser: IconDefinition;           // User/person icon  
const faHouse: IconDefinition;          // House/home icon
const faEnvelope: IconDefinition;       // Envelope/email icon
const faPhone: IconDefinition;          // Phone icon
const faSearch: IconDefinition;         // Search/magnifying glass icon
const faCheck: IconDefinition;          // Check/checkmark icon
const faTimes: IconDefinition;          // X/close icon
const faPlus: IconDefinition;           // Plus/add icon
const faMinus: IconDefinition;          // Minus/subtract icon

Navigation Icons

const faArrowLeft: IconDefinition;      // Left arrow
const faArrowRight: IconDefinition;     // Right arrow  
const faArrowUp: IconDefinition;        // Up arrow
const faArrowDown: IconDefinition;      // Down arrow
const faBars: IconDefinition;           // Hamburger menu
const faEllipsis: IconDefinition;       // More options (3 dots)

File & Document Icons

const faFile: IconDefinition;           // Generic file
const faFileText: IconDefinition;       // Text document
const faFileImage: IconDefinition;      // Image file
const faFilePdf: IconDefinition;        // PDF document
const faFolder: IconDefinition;         // Folder
const faDownload: IconDefinition;       // Download
const faUpload: IconDefinition;         // Upload

Social & Communication Icons

const faComment: IconDefinition;        // Comment/chat
const faShare: IconDefinition;          // Share
const faThumbsUp: IconDefinition;       // Like/thumbs up
const faThumbsDown: IconDefinition;     // Dislike/thumbs down
const faStar: IconDefinition;           // Star/rating
const faBookmark: IconDefinition;       // Bookmark

Numeric Icons (0-9)

const fa0: IconDefinition;              // Number 0
const fa1: IconDefinition;              // Number 1
const fa2: IconDefinition;              // Number 2
const fa3: IconDefinition;              // Number 3
const fa4: IconDefinition;              // Number 4
const fa5: IconDefinition;              // Number 5
const fa6: IconDefinition;              // Number 6
const fa7: IconDefinition;              // Number 7
const fa8: IconDefinition;              // Number 8
const fa9: IconDefinition;              // Number 9

Note: This package contains 1,979 total icon exports. The above represents commonly used icons. All icons follow the same IconDefinition structure and naming pattern starting with fa followed by the camelCase icon name.

Individual Icon File Exports

Each icon is also available as a separate module file with additional exports:

// Available from each icon file (e.g., faHeart.js)
const definition: IconDefinition;       // Complete icon definition
const fa[IconName]: IconDefinition;     // Main icon export (same as definition)
const prefix: IconPrefix;              // Always "fas" for this package
const iconName: IconName;              // String name of the icon
const width: number;                   // Icon width in units
const height: number;                  // Icon height in units  
const ligatures: string[];             // Array of aliases/ligatures
const unicode: string;                 // Unicode codepoint (hex)
const svgPathData: string;             // SVG path data string
const aliases: string[];               // Same as ligatures

Types

interface IconDefinition {
  prefix: IconPrefix;
  iconName: IconName;
  icon: [
    number,        // width
    number,        // height
    string[],      // ligatures/aliases
    string,        // unicode codepoint
    IconPathData   // SVG path data
  ];
}

type IconPrefix = "fas" | "far" | "fal" | "fat" | "fad" | "fab";
type IconName = string;
type IconPathData = string | string[];

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

Usage Examples

Tree-Shaking with Individual Imports

import { faHeart, faUser, faHouse } from "@fortawesome/free-solid-svg-icons";

// Use only the icons you need - unused icons won't be bundled
const icons = [faHeart, faUser, faHouse];

Accessing Icon Properties

import { faHeart } from "@fortawesome/free-solid-svg-icons";

// Icon metadata
console.log(faHeart.iconName);    // "heart"
console.log(faHeart.prefix);      // "fas"

// Icon dimensions
const [width, height] = [faHeart.icon[0], faHeart.icon[1]];
console.log(`Icon size: ${width}x${height}`); // "Icon size: 512x512"

// SVG path data for direct rendering
const pathData = faHeart.icon[4];
const svg = `<svg viewBox="0 0 ${width} ${height}"><path d="${pathData}"/></svg>`;

Dynamic Icon Access

import { fas } from "@fortawesome/free-solid-svg-icons";

// Access icons dynamically by name
const iconName = "heart";
const icon = fas[`fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`];
// or
const heartIcon = fas.faHeart;

Using with Font Awesome Core Library

import { library, icon } from "@fortawesome/fontawesome-svg-core";
import { faHeart, faUser } from "@fortawesome/free-solid-svg-icons";

// Add icons to library
library.add(faHeart, faUser);

// Render icon
const heartSvg = icon({ prefix: "fas", iconName: "heart" }).html;

Individual File Import for Maximum Efficiency

// Import only the specific icon file - most efficient for large apps
import { faHeart } from "@fortawesome/free-solid-svg-icons/faHeart";
import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";

// Each import only includes that specific icon's data
const icons = { faHeart, faUser };