| 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).- : Getter that returns a Simple Icons-compatible string, using and .
