skill CX Codex

add-icon — Claude Code skill: what it does, how to install

Q: How to install add-icon in Claude Code?

Run `npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code` in your terminal. You can also place the skill file directly in `~/.claude/skills/add-icon/SKILL.md`.

Finds and inserts Font Awesome icons into your codebase according to your active framework and setup.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code

Open on GitHub

What add-icon does

This skill inserts Font Awesome icons using concepts or direct names. It inspects your repository to match your implementation style, whether that means React components, raw SVG or CDN tags. First, it looks for the official fa CLI on your PATH. If missing, it runs bundled Python scripts instead.

The tool reads .font-awesome.md or explores dependencies to figure out how imports work in your app. When a requested glyph does not exist, it falls back to an internal suggestion lookup and picks the closest match automatically. For custom Kit subsets, you must have fa version 0.8.0 or newer alongside an active session via fa login or FA_API_TOKEN.

What it helps with

insert Font Awesome icons using natural language concepts
generate appropriate markup for React or Vue components
verify whether an icon exists in a custom Kit subset
substitute missing icons with relevant catalog alternatives

Example prompts for the agent

Add a shopping cart icon to the checkout button in src/components/Header.tsx
Insert a thin coffee cup icon into the navigation menu
Put a user profile icon next to the account link

How to install add-icon

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code

2Manually: put the files in place

~/.claude/skills/add-icon/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/add-icon/

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a codex

2Manually: put the files in place

.agents/skills/add-icon/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a cursor

2Manually: put the files in place

.cursor/skills/add-icon/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install FortAwesome/fontawesome-agent-tools add-icon

2Manually: put the files in place

.github/skills/add-icon/SKILL.md

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a gemini-cli

2Platform CLI

gemini skills install https://github.com/FortAwesome/fontawesome-agent-tools --path plugins/icons/skills/add-icon

Manually: put the files in place

.devin/skills/add-icon/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about add-icon

How to install add-icon in Claude Code?

Run npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code in your terminal. You can also place the skill file directly in ~/.claude/skills/add-icon/SKILL.md.

What does the add-icon skill do?

It discovers your project setup, finds the target Font Awesome glyph, and writes the correct component import or markup.

Is the fa CLI required?

No, it falls back to local Python helpers when the CLI binary is absent. You only need fa version 0.8.0 or higher to inspect custom Kit subsets.

Similar skills

All skills for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set4

suggest-icon Picks a Font Awesome icon for a concept, situation or verb, then checks it exists in your version or Kit. CX Codex +1 551installs setup-fa Configures Font Awesome from scratch: detects your framework, sets up a Kit or packages, and creates .font-awesome.md for icon workflows. CX Codex +1 503installs fa-help Answers Font Awesome questions from the official documentation instead of model memory. Handy for setup, styling and upgrade work. CX Codex +1 498installs