# Add Icon

> Add new icons to the GitLens GL Icons font

- Skill: `gitkraken/add-icon` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gitkraken/add-icon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gitkraken/add-icon/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gitkraken (https://skillmd.com/u/gitkraken)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gitkraken/add-icon

---


# /add-icon - Add GL Icon

## Usage

```
/add-icon [icon-name]
```

- `icon-name` — kebab-case (e.g., `my-new-icon`)

## Workflow

### 1. Add SVG File

Place in `images/icons/{icon-name}.svg`

Requirements:

- Square viewBox (e.g., `viewBox="0 0 16 16"`)
- Single color (fill controlled by CSS)
- No embedded `<style>` tags or fonts
- Use `fill="currentColor"` for color inheritance

### 2. Update Mapping

Append to `images/icons/template/mapping.json`:

```json
"icon-name": {next-available-code-point}
```

Code points are in the Private Use Area range (57344-63743). Check existing entries for next available.

### 3. Build

```bash
pnpm run icons:svgo        # Optimize SVGs
pnpm run build:icons       # Generate font (runs svgo + fantasticon + apply + export)
```

### 4. Verify Font Cache-Busting

`pnpm run build:icons` (via `scripts/applyIconsContribution.mjs`) now automatically propagates the new `glicons.woff2?{hash}` cache-bust hash into **both** `src/webviews/apps/shared/glicons.scss` **and** every per-app webview `*.html` file (each declares its own `@font-face`). No manual search-replace needed.

Verify they're all unified (every reference must be the same hash):

```bash
grep -rho "glicons.woff2?[a-f0-9]*" src/ dist/ | sort | uniq -c
```

If any HTML file lags behind, re-run `pnpm run build:icons` — a stale hash leaves that webview pointing at a cached font without the new glyph.

### 5. Use the Icon

In Lit components (via the shared `<code-icon>` element, `src/webviews/apps/shared/components/code-icon.ts` — `gl-` prefix maps to the glicons font):

```typescript
html`<code-icon icon="gl-my-new-icon"></code-icon>`;
```

In CSS:

```css
.my-element::before {
	font-family: 'glicons';
	content: '\{codepoint}';
}
```

## Troubleshooting

- **Icon not showing**: Check font URL is updated, verify code point in mapping.json, rebuild with `pnpm run build:icons`
- **SVG issues**: Ensure single path/shape, remove `<style>` tags, use `fill="currentColor"`