add-icon by wei

---
name: add-icon
description: Add or update supported language, framework, library, tool, or platform icons in Socialify. Use when a request involves adding a new icon/logo, mapping a display name to a Simple Icons entry or a custom icon, and updating the language options list used in the UI.
---

# Add Icon Support

## Overview

Add a new language, framework, library, tool, or platform icon to Socialify’s supported list by mapping a display name to a Simple Icons entry (preferred) or a custom icon. This skill focuses on minimal, consistent changes so the entry appears in generated images and selection lists.

## Workflow

### 1. Identify the display name and icon source

Pick the display name you want to surface in Socialify (language, framework, library, tool, or platform). Confirm whether the icon exists in Simple Icons. If it is a language, also check the GitHub Linguist repo for the exact name at `https://raw.githubusercontent.com/github-linguist/linguist/main/lib/linguist/languages.yml`:
- If the icon exists, use the `si<IconName>` export in the mapping.
- If the icon does not exist, add a custom icon to `common/icons/customIcons.ts` and export it.

Custom icons must follow the `SimpleIcon` TypeScript type (same shape as Simple Icons):
- `title`: Display name used in the SVG title tag.
- `slug`: Lowercase, URL-safe identifier (no spaces).
- `hex`: Brand color hex without `#` (uppercase preferred).
- `source`: Source URL for the icon (empty string if unavailable).
- `guidelines`: Brand guidelines URL (empty string if unavailable).
- `path`: SVG path data string (single path, viewBox `0 0 24 24`).
- `svg`: Getter that returns a Simple Icons-compatible `<svg>` string, using `title` and `path`.

### 2. Add the mapping entry

Update `common/icons/languageMapping.ts`:
- Import the Simple Icon or custom icon.
- Add the entry in `LANGUAGE_ICON_MAPPING` under “GitHub Linguist languages” (for languages) or “Custom Frameworks, Libraries, Tools and Platforms” (for non-languages), keeping alphabetical order by display name.

### 3. Check UI coverage

Confirm the UI can surface the new entry:
- `common/configHelper.ts` uses `LANGUAGE_ICON_MAPPING` to build language options, so additions there should show in dropdowns automatically.

### 4. Update docs and changeset

Follow repo conventions:
- Add a changeset via `pnpm changeset add --empty`, then fill in a one-line description.
- Update `AGENTS.md` or other relevant docs if the supported list is referenced.

## Implementation checklist

- Choose the display name (language, framework, library, tool, or platform; verify Linguist name for languages).
- Add a Simple Icon import or a custom icon in `common/icons/customIcons.ts`.
- Add the mapping in `common/icons/languageMapping.ts` in alphabetical order.
- Confirm the UI picks it up via `common/configHelper.ts`.
- Update docs that mention supported entries and add a changeset.

## Example (Typst)

Reference commit `121e569b9899851f1df90cfcdaca6e7fa6e2739d`:
- Added `siTypst` import and the `Typst: siTypst` mapping entry in `common/icons/languageMapping.ts`.
- Added a changeset noting the new supported language.

## Notes

- Keep entries alphabetized to match existing conventions.
- Prefer Simple Icons when available; custom icons only when necessary.