AI Agent Tools

Font Awesome now has official agent tools that let AI coding assistants find and add the right icons to your projects.

Getting Started

Font Awesome's agent tools are distributed as Skills — reusable instruction sets that work across a wide range of AI coding agents including Claude Code, Cursor, GitHub Copilot, Windsurf, and many more.

Install the skills into your project:

npx skills add fontawesome-agent-tools

Once installed, you'll have two new skills available in your agent sessions: /suggest-icon and /add-icon.

Claude Code Plugin Marketplace

If you're using Claude Code, you can also install directly from the plugin marketplace:

Add the marketplace:

claude plugin marketplace add FortAwesome/fontawesome-agent-tools

Install the plugin:

claude plugin install icons@fontawesome-agent-tools

Launch claude to continue from here.

Claude Desktop with Claude Code

To install, launch the Claude app and:

• Click Customize
• Click Browse plugins
• Click the Personal tab
• Click +
• Choose Add marketplace from GitHub
• Enter FortAwesome/fontawesome-agent-tools for the URL
• Click Install for the new Icons plugin

Since this skill uses a script, as of March, 2026 you need to use the "Code" tab inside Claude.

Suggest an Icon

Use /suggest-icon when you need help finding the right icon for a concept or use case. Give it a description of what you need, and it will search the Font Awesome icon library to recommend the best match.

/suggest-icon shopping cart

The tool will:

1. Search the Font Awesome API for icons matching your concept
2. Verify the icon exists in your Font Awesome version
3. Present a recommendation with the icon name, available families and styles, and whether it's available in Free or requires Pro
4. Offer to add the icon to your project with /add-icon

Add an Icon

Use /add-icon to insert a Font Awesome icon into your project. The tool auto-detects how your project uses Font Awesome and generates the correct code for your setup.

/add-icon cart-shopping

You can also specify a style and a location in your code:

/add-icon cart-shopping style:regular location:the checkout button in src/components/Header.tsx

If you pass a concept instead of an exact icon name, the tool will use /suggest-icon internally to find the best match before adding it.

The tool will:

1. Detect your project's Font Awesome integration method
2. Determine the correct icon family and style
3. Generate framework-specific code (e.g., a React component import, an <i> tag, an SVG sprite reference)
4. Insert the code at the specified location, or display it for you to place manually
5. Warn you if the icon requires Pro but your project uses the Free tier

Supported Integrations

The agent tools auto-detect and generate the correct code for the following Font Awesome integration methods:

Project Configuration

The first time you use /add-icon, the tool scans your project to determine how you use Font Awesome — which packages are installed, what version you're on, whether you use Free or Pro, and what import patterns your code follows. It saves this information in a .font-awesome.md file at your project root.

This file looks something like:

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

Commit this file to your repo. It lets the whole team benefit from faster icon additions and ensures consistent code generation across your project. Future /add-icon calls skip the discovery step and use this configuration directly.