Font Awesome

Add Font Awesome icons to web projects with CDN, npm, React, and SVG sprite methods.

Setup

On first use, read setup.md silently and start naturally. Never mention setup files to the user.

When to Use

User needs icons in a web project. Agent handles icon selection, installation method, and framework-specific syntax.

Architecture

No persistent storage needed. Icon preferences tracked in user's main memory if requested.

Quick Reference

Topic	File
Setup process	setup.md
Memory template	memory-template.md

Core Rules

1. Determine Installation Method First

Ask or infer the project setup before suggesting icons:

Project Type	Recommended Method
Quick prototype / CDN OK	CDN Kit
npm/yarn project	@fortawesome/fontawesome-free
React/Vue/Angular	Framework package
Offline / no external deps	SVG sprites or individual SVGs

2. Use Correct Syntax Per Method

CDN Kit (easiest):

html

<script src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-house"></i>

npm (fontawesome-free):

bash

npm install @fortawesome/fontawesome-free

javascript

import '@fortawesome/fontawesome-free/css/all.min.css';

html

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

React:

bash

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

jsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHouse } from '@fortawesome/free-solid-svg-icons';

<FontAwesomeIcon icon={faHouse} />

3. Know the Icon Styles

Prefix	Style	Availability
fa-solid / fas	Solid	Free
fa-regular / far	Regular (outlined)	Free (limited)
fa-brands / fab	Brand logos	Free
fa-light / fal	Light	Pro only
fa-thin / fat	Thin	Pro only
fa-duotone / fad	Duotone	Pro only

4. Icon Search Strategy

When user asks for an icon:

1. Suggest semantic name first (e.g., fa-envelope for email)
2. Provide 2-3 alternatives if ambiguous
3. Specify style availability (free vs pro)

Common mappings:

Concept	Icon	Style
Home	fa-house	solid, regular
User/Profile	fa-user	solid, regular
Settings	fa-gear	solid
Search	fa-magnifying-glass	solid
Menu	fa-bars	solid
Close	fa-xmark	solid
Edit	fa-pen	solid
Delete	fa-trash	solid
Save	fa-floppy-disk	solid, regular
Download	fa-download	solid
Upload	fa-upload	solid
Email	fa-envelope	solid, regular
Phone	fa-phone	solid
Location	fa-location-dot	solid
Calendar	fa-calendar	solid, regular
Clock	fa-clock	solid, regular
Check	fa-check	solid
Warning	fa-triangle-exclamation	solid
Info	fa-circle-info	solid
Error	fa-circle-xmark	solid
Success	fa-circle-check	solid
Arrow right	fa-arrow-right	solid
Chevron down	fa-chevron-down	solid
Plus	fa-plus	solid
Minus	fa-minus	solid
Star	fa-star	solid, regular
Heart	fa-heart	solid, regular
Cart	fa-cart-shopping	solid
GitHub	fa-github	brands
Twitter/X	fa-x-twitter	brands
LinkedIn	fa-linkedin	brands
Facebook	fa-facebook	brands
Instagram	fa-instagram	brands
YouTube	fa-youtube	brands

5. Sizing and Styling

Size classes:

html

<i class="fa-solid fa-house fa-xs"></i>   <!-- 0.75em -->
<i class="fa-solid fa-house fa-sm"></i>   <!-- 0.875em -->
<i class="fa-solid fa-house fa-lg"></i>   <!-- 1.25em -->
<i class="fa-solid fa-house fa-xl"></i>   <!-- 1.5em -->
<i class="fa-solid fa-house fa-2xl"></i>  <!-- 2em -->

Fixed width (for alignment in lists):

html

<i class="fa-solid fa-house fa-fw"></i>

Animation:

html

<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-bell fa-shake"></i>

Rotation:

html

<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-flip-horizontal"></i>

6. Accessibility

Always provide accessible labels:

html

<!-- Decorative (hidden from screen readers) -->
<i class="fa-solid fa-house" aria-hidden="true"></i>

<!-- Meaningful (needs label) -->
<i class="fa-solid fa-trash" aria-label="Delete item"></i>

<!-- With visible text (icon is decorative) -->
<button>
  <i class="fa-solid fa-save" aria-hidden="true"></i>
  Save
</button>

7. Version Differences

v6 (current):

• Use fa-solid, fa-regular, fa-brands
• Icon names like fa-house, fa-magnifying-glass

v5 (legacy):

• Use fas, far, fab
• Some icon names changed (e.g., fa-home → fa-house)

If working with existing v5 code, don't force upgrade unless asked.

Common Traps

• Using Pro icons in free tier → icons don't render, no error
• Wrong prefix (fa-solid vs fas) → depends on version, check project
• Missing CSS import with npm → icons show as squares
• Using v5 names in v6 → some work, some don't (e.g., fa-home deprecated)
• Not setting aria-hidden on decorative icons → screen reader noise

External Endpoints

Endpoint	Data Sent	Purpose
kit.fontawesome.com	Kit ID only	Load icons via CDN
cdn.fontawesome.net	None	Alternative CDN

No user data is sent. Icons loaded from public CDN.

Security & Privacy

Data that leaves your machine:

• HTTP request to Font Awesome CDN (if using CDN method)

Data that stays local:

• All icon choices and code

This skill does NOT:

• Track icon usage
• Send analytics
• Require authentication for free tier

Related Skills

Install with clawhub install <slug> if user confirms:

• react — React development patterns
• html — HTML best practices
• css — CSS styling patterns

Feedback

• If useful: clawhub star font-awesome
• Stay updated: clawhub sync