or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Font Awesome Regular SVG Icons

Font Awesome Regular SVG Icons provides SVG icon definitions for Font Awesome's regular (outlined) icon set. Contains 258 individual icon exports as IconDefinition objects with SVG path data and metadata, designed for integration with Font Awesome's JavaScript ecosystem.

Package Information

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

Core Imports

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

Import all icons as a pack:

import { far } from "@fortawesome/free-regular-svg-icons";

CommonJS import:

const { faHeart, faUser, faEnvelope } = require("@fortawesome/free-regular-svg-icons");

Basic Usage

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

// Icons are IconDefinition objects containing SVG data
console.log(faHeart.prefix);     // 'far'
console.log(faHeart.iconName);   // 'heart'
console.log(faHeart.icon);       // [512, 512, [...], 'f004', 'M225.8 468.2l-2.5...']

// Use with Font Awesome libraries
import { library, dom } from "@fortawesome/fontawesome-svg-core";
library.add(faHeart, faUser);
dom.watch(); // Automatically replaces <i> tags

Architecture

Font Awesome Regular SVG Icons is built around a simple export structure:

Individual Icon Exports: Each icon exported as a named constant (e.g., faHeart, faUser)
Icon Pack Export: Complete collection available as far object
Legacy Aliases: Many icons have multiple export names for backward compatibility
TypeScript Support: Full type definitions included for all exports
Icon Definition Structure: Standardized format with prefix, name, and SVG data array

Capabilities

Individual Icon Exports

All 258 regular icons are available as individual named exports. Each icon follows the IconDefinition interface.

// Example icon exports (representative sample)
export const faHeart: IconDefinition;
export const faUser: IconDefinition;
export const faEnvelope: IconDefinition;
export const faTrashCan: IconDefinition;
export const faFile: IconDefinition;
export const faFolder: IconDefinition;
export const faImage: IconDefinition;
export const faStar: IconDefinition;
export const faCircle: IconDefinition;
export const faSquare: IconDefinition;
export const faCalendar: IconDefinition;
export const faClock: IconDefinition;
export const faFlag: IconDefinition;
export const faBell: IconDefinition;
export const faBookmark: IconDefinition;
export const faComment: IconDefinition;
export const faEye: IconDefinition;
export const faHandPaper: IconDefinition;
export const faLightbulb: IconDefinition;
export const faMap: IconDefinition;

// Legacy aliases (many icons have multiple names)
export const faTrashAlt: IconDefinition; // Same as faTrashCan
export const faEdit: IconDefinition;     // Same as faPenToSquare
export const faFileAlt: IconDefinition; // Same as faFileLines
export const faSmile: IconDefinition;   // Same as faFaceSmile

Icon Pack Export

Complete collection of all regular icons in a single object.

/**
 * Complete Font Awesome Regular icon pack containing all icons
 */
export const far: IconPack;

Package Constants

Core package metadata and constants.

/**
 * Icon prefix for regular icons (always 'far')
 */
export const prefix: IconPrefix;

Type Re-exports

All core Font Awesome types are re-exported from the common types package for convenience.

/**
 * Re-exported types from @fortawesome/fontawesome-common-types
 */
export { IconDefinition, IconLookup, IconName, IconPrefix, IconPack } from '@fortawesome/fontawesome-common-types';

Complete Icon Categories

Face and Emotion Icons

// Facial expressions and emotions
export const faFaceSmile: IconDefinition;        // faSmile
export const faFaceSmileBeam: IconDefinition;    // faSmileBeam  
export const faFaceSmileWink: IconDefinition;    // faSmileWink
export const faFaceGrin: IconDefinition;         // faGrin
export const faFaceGrinBeam: IconDefinition;     // faGrinBeam
export const faFaceGrinWink: IconDefinition;     // faGrinWink
export const faFaceGrinStars: IconDefinition;    // faGrinStars
export const faFaceGrinHearts: IconDefinition;   // faGrinHearts
export const faFaceGrinTears: IconDefinition;    // faGrinTears
export const faFaceKiss: IconDefinition;         // faKiss
export const faFaceKissBeam: IconDefinition;     // faKissBeam
export const faFaceKissWinkHeart: IconDefinition; // faKissWinkHeart
export const faFaceLaugh: IconDefinition;        // faLaugh
export const faFaceLaughBeam: IconDefinition;    // faLaughBeam
export const faFaceFrown: IconDefinition;        // faFrown
export const faFaceSadCry: IconDefinition;       // faSadCry
export const faFaceSadTear: IconDefinition;      // faSadTear
export const faFaceAngry: IconDefinition;        // faAngry
export const faFaceTired: IconDefinition;        // faTired
export const faFaceDizzy: IconDefinition;        // faDizzy
export const faFaceFlushed: IconDefinition;      // faFlushed
export const faFaceMeh: IconDefinition;          // faMeh
export const faFaceRollingEyes: IconDefinition;  // faMehRollingEyes
export const faFaceSurprise: IconDefinition;     // faSurprise
export const faFaceGrimace: IconDefinition;      // faGrimace

File and Document Icons

// File types and document management
export const faFile: IconDefinition;
export const faFileLines: IconDefinition;        // faFileAlt, faFileText
export const faFolder: IconDefinition;           // faFolderBlank
export const faFolderOpen: IconDefinition;
export const faFolderClosed: IconDefinition;
export const faFileImage: IconDefinition;
export const faFileAudio: IconDefinition;
export const faFileVideo: IconDefinition;
export const faFilePdf: IconDefinition;
export const faFileWord: IconDefinition;
export const faFileExcel: IconDefinition;
export const faFilePowerpoint: IconDefinition;
export const faFileCode: IconDefinition;
export const faFileZipper: IconDefinition;       // faFileArchive  
export const faClipboard: IconDefinition;
export const faPaste: IconDefinition;            // faFileClipboard
export const faCopy: IconDefinition;

User Interface Icons

// Interface elements and controls
export const faSquare: IconDefinition;
export const faSquareCheck: IconDefinition;      // faCheckSquare
export const faSquarePlus: IconDefinition;       // faPlusSquare
export const faSquareMinus: IconDefinition;      // faMinusSquare
export const faSquareCaretUp: IconDefinition;    // faCaretSquareUp
export const faSquareCaretDown: IconDefinition;  // faCaretSquareDown
export const faSquareCaretLeft: IconDefinition;  // faCaretSquareLeft
export const faSquareCaretRight: IconDefinition; // faCaretSquareRight
export const faCircle: IconDefinition;
export const faCircleCheck: IconDefinition;      // faCheckCircle
export const faCircleXmark: IconDefinition;      // faTimesCircle, faXmarkCircle
export const faCircleDot: IconDefinition;        // faDotCircle
export const faCirclePlay: IconDefinition;       // faPlayCircle
export const faCirclePause: IconDefinition;      // faPauseCircle
export const faCircleStop: IconDefinition;       // faStopCircle
export const faCircleQuestion: IconDefinition;   // faQuestionCircle
export const faCircleUp: IconDefinition;         // faArrowAltCircleUp
export const faCircleDown: IconDefinition;       // faArrowAltCircleDown
export const faCircleLeft: IconDefinition;       // faArrowAltCircleLeft
export const faCircleRight: IconDefinition;      // faArrowAltCircleRight

Communication Icons

// Communication and messaging
export const faComment: IconDefinition;
export const faComments: IconDefinition;
export const faMessage: IconDefinition;          // faCommentAlt
export const faCommentDots: IconDefinition;      // faCommenting
export const faEnvelope: IconDefinition;
export const faEnvelopeOpen: IconDefinition;
export const faPaperPlane: IconDefinition;
export const faBell: IconDefinition;
export const faBellSlash: IconDefinition;

Hand Gesture Icons

// Hand gestures and pointing
export const faHand: IconDefinition;             // faHandPaper
export const faHandBackFist: IconDefinition;    // faHandRock
export const faHandPeace: IconDefinition;
export const faHandPointer: IconDefinition;
export const faHandScissors: IconDefinition;
export const faHandLizard: IconDefinition;
export const faHandSpock: IconDefinition;
export const faHandPointUp: IconDefinition;
export const faHandPointDown: IconDefinition;
export const faHandPointLeft: IconDefinition;
export const faHandPointRight: IconDefinition;
export const faHandshake: IconDefinition;
export const faThumbsUp: IconDefinition;
export const faThumbsDown: IconDefinition;

Calendar and Time Icons

// Time and calendar management
export const faCalendar: IconDefinition;
export const faCalendarDays: IconDefinition;     // faCalendarAlt
export const faCalendarCheck: IconDefinition;
export const faCalendarPlus: IconDefinition;
export const faCalendarMinus: IconDefinition;
export const faCalendarXmark: IconDefinition;    // faCalendarTimes
export const faClock: IconDefinition;            // faClockFour
export const faHourglass: IconDefinition;        // faHourglassEmpty
export const faHourglassHalf: IconDefinition;    // faHourglass2

Window and Application Icons

// Window management and applications
export const faWindowMaximize: IconDefinition;
export const faWindowMinimize: IconDefinition;
export const faWindowRestore: IconDefinition;
export const faWindowClose: IconDefinition;      // faRectangleXmark
export const faRectangleList: IconDefinition;    // faListAlt
export const faRectangleXmark: IconDefinition;   // faRectangleTimes, faTimesRectangle

Chess Piece Icons

// Chess game pieces
export const faChessKing: IconDefinition;
export const faChessQueen: IconDefinition;
export const faChessBishop: IconDefinition;
export const faChessKnight: IconDefinition;
export const faChessRook: IconDefinition;
export const faChessPawn: IconDefinition;

Miscellaneous Icons

// Various utility and decorative icons
export const faStar: IconDefinition;
export const faStarHalf: IconDefinition;
export const faStarHalfStroke: IconDefinition;   // faStarHalfAlt
export const faHeart: IconDefinition;
export const faGem: IconDefinition;
export const faLemon: IconDefinition;
export const faSnowflake: IconDefinition;
export const faSun: IconDefinition;
export const faMoon: IconDefinition;
export const faLightbulb: IconDefinition;
export const faFlag: IconDefinition;
export const faMap: IconDefinition;
export const faCompass: IconDefinition;
export const faEye: IconDefinition;
export const faEyeSlash: IconDefinition;
export const faBookmark: IconDefinition;
export const faFloppyDisk: IconDefinition;       // faSave
export const faTrashCan: IconDefinition;         // faTrashAlt
export const faPenToSquare: IconDefinition;      // faEdit
export const faShareFromSquare: IconDefinition;  // faShareSquare
export const faKeyboard: IconDefinition;
export const faNewspaper: IconDefinition;
export const faBuilding: IconDefinition;
export const faHospital: IconDefinition;         // faHospitalAlt, faHospitalWide
export const faFutbol: IconDefinition;           // faFutbolBall, faSoccerBall
export const faLifeRing: IconDefinition;
export const faAddressBook: IconDefinition;      // faContactBook
export const faAddressCard: IconDefinition;      // faContactCard, faVcard
export const faIdCard: IconDefinition;           // faDriversLicense  
export const faIdBadge: IconDefinition;
export const faCreditCard: IconDefinition;       // faCreditCardAlt
export const faMoneyBill1: IconDefinition;       // faMoneyBillAlt
export const faHardDrive: IconDefinition;        // faHdd
export const faNoteSticky: IconDefinition;       // faStickyNote
export const faClone: IconDefinition;
export const faObjectGroup: IconDefinition;
export const faObjectUngroup: IconDefinition;
export const faChartBar: IconDefinition;         // faBarChart
export const faClosedCaptioning: IconDefinition;
export const faRegistered: IconDefinition;
export const faCopyright: IconDefinition;
export const faUser: IconDefinition;
export const faCircleUser: IconDefinition;       // faUserCircle
export const faFontAwesome: IconDefinition;      // faFontAwesomeFlag, faFontAwesomeLogoFull
export const faImage: IconDefinition;
export const faImages: IconDefinition;

Types

/**
 * Icon definition object containing all icon metadata and SVG data
 */
interface IconDefinition {
  prefix: IconPrefix;       // Icon prefix (always 'far' for regular icons)
  iconName: IconName;       // Kebab-case icon name (e.g., 'heart', 'user')
  icon: [
    number,                 // Icon width (typically 512)
    number,                 // Icon height (typically 512)  
    number[],               // Unicode aliases array
    string,                 // Primary unicode value (hex)
    string                  // SVG path data string
  ];
}

/**
 * Icon pack containing all icons with metadata
 */
interface IconPack {
  [key: string]: IconDefinition;
}

/**
 * Icon prefix type (always 'far' for this package)
 */
type IconPrefix = 'far';

/**
 * Icon name type (string in kebab-case format)
 */
type IconName = string;

/**
 * Icon lookup interface for finding icons by name and prefix
 */
interface IconLookup {
  prefix: IconPrefix;
  iconName: IconName;
}

Usage Examples

Basic Icon Usage

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

// Access icon properties
const heartIcon = faHeart;
console.log(heartIcon.prefix);     // 'far'
console.log(heartIcon.iconName);   // 'heart'
console.log(heartIcon.icon[0]);    // 512 (width)
console.log(heartIcon.icon[1]);    // 512 (height)
console.log(heartIcon.icon[4]);    // 'M225.8 468.2l-2.5-2.3L48.1...' (SVG path)

Using with Font Awesome Core

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

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

// Create icon elements
const heartIcon = icon({ prefix: 'far', iconName: 'heart' });
const userIcon = icon({ prefix: 'far', iconName: 'user' });

// Access rendered HTML
console.log(heartIcon.html);

Legacy Alias Usage

import { 
  faEdit,           // Legacy name
  faPenToSquare,    // Current name
  faTrashAlt,       // Legacy name
  faTrashCan        // Current name
} from "@fortawesome/free-regular-svg-icons";

// Both refer to the same icon definition
console.log(faEdit === faPenToSquare);     // true
console.log(faTrashAlt === faTrashCan);    // true

Icon Pack Usage

import { far } from "@fortawesome/free-regular-svg-icons";

// Access all icons through the pack
const heartIcon = far.faHeart;
const userIcon = far.faUser;

// Iterate over all icons
Object.keys(far).forEach(iconName => {
  const iconDef = far[iconName];
  console.log(`${iconName}: ${iconDef.iconName}`);
});