# add-icon

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 569 installs · ★ 4
- Author: FortAwesome
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/FortAwesome/fontawesome-agent-tools/tree/HEAD/plugins/icons/skills/add-icon/SKILL.md
- Updated: 2026-07-02
- HTML: https://affpapa.org/en/nevibecode/skills/add-icon

## What it 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`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/add-icon/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/add-icon/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/add-icon/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/add-icon/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install FortAwesome/fontawesome-agent-tools add-icon
```

2. **Manually: put the files in place**
- File: `.github/skills/add-icon/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/FortAwesome/fontawesome-agent-tools --path plugins/icons/skills/add-icon
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/add-icon/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/FortAwesome/fontawesome-agent-tools/tree/HEAD/plugins/icons/skills/add-icon/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [fortawesome/fontawesome-agent-tools](https://affpapa.org/en/nevibecode/by/fortawesome/fontawesome-agent-tools.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md