Add custom SVG icons to salesforcedx-vscode-services for font generation.

BSD-3-ClauseAuto-check passedFrontend & Design

Install Icons Src

skills CLI
$ npx skills add forcedotcom/salesforcedx-vscode --skill icons-src -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install forcedotcom/salesforcedx-vscode icons-src --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/forcedotcom/salesforcedx-vscode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/icons-src .claude/skills/icons-src && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
icons-src
GitHub stars
1k
Token cost
~891 tokens
SKILL.md length
253 words
Files
1
Skills in repo
37
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Add custom SVG icons to salesforcedx-vscode-services for font generation.

  • Works in 5 steps: Add SVG — media/icons-src/.svg (name =… → Add manifest entry — append to… → Run build — npm run build:icons -w… → …
  • Adding new icons to media/icons-src
  • SKILL.md covers Location, SVG Requirements, Workflow and icons.json Format, plus 2 more sections
  • Calls npm and git; reaches w3.org

What it does

Icons Src is an agent skill from forcedotcom/salesforcedx-vscode. Add custom SVG icons to salesforcedx-vscode-services for font generation. Use when adding new icons to media/icons-src, creating SVG icons for VS Code extension, or defining font-based icons.

Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Icons and illustration. It works with Visual Studio Code. The repository describes itself as: Salesforce Extensions for VS Code. The licence is BSD-3-Clause.

When your agent uses it

  • Adding new icons to media/icons-src
  • Creating SVG icons for VS Code extension
  • Defining font-based icons

Example prompts

  • “/icons-src”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Add SVG — media/icons-src/.svg (name = lowercase, no spaces). Done: file matches SVG Requirements
  2. Add manifest entry — append to media/icons-src/icons.json per icons.json Format. Done: key + id + description present
  3. Run build — npm run build:icons -w salesforcedx-vscode-services. Done: auto-generated artifacts updated — verify git diff (see Artifacts)
  4. Add ICONS constant — src/vscode/mediaService.ts: ICONS + ICON_DESCRIPTION_KEYS; add i18n key in messages if needed. Done: new icon in both…
  5. Regenerate types — if services-types consumes ICONS, run its generate script. Done: icons.ts includes new icon

What it can do on your machine

Read from SKILL.md and the folder at commit f7bb6fe. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Icons Src loads about 891 tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 253 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~50
When it runs · the whole SKILL.md, loaded when a task matches
~891

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from forcedotcom/salesforcedx-vscode at commit f7bb6fe, republished under its BSD-3-Clause licence (© forcedotcom). 253 words, ~891 tokens.

Download SKILL.mdSave it as .claude/skills/icons-src/SKILL.md (or your agent's skills folder).
name
icons-src
description
Add custom SVG icons to salesforcedx-vscode-services for font generation. Use when adding new icons to media/icons-src, creating SVG icons for VS Code extension, or defining font-based icons.
review
always

Icons-src: Adding Custom Font Icons

Location

packages/salesforcedx-vscode-services/media/icons-src/

SVG Requirements

  • viewBox: 0 0 24 24 only (enables better upscaling)
  • xmlns: http://www.w3.org/2000/svg
  • fill: currentColor on inner <g> so VS Code themes control color
  • structure: wrap paths in <g fill="currentColor" transform="scale(X)"> — adjust scale so glyph fits 24×24

External sources (Wikipedia, Illustrator, etc.) may be too complex for font generation. Simplify in vector editor or substitute alternative.

Reference (leaf.svg)
svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor" transform="scale(0.75)">
    <path d="..."></path>
  </g>
</svg>
Avoid
  • Hardcoded fill colors (e.g. fill="#000") — breaks theme support
  • viewBox other than 24×24
  • Strokes without stroke="currentColor" if used

Workflow

  1. Add SVG — media/icons-src/<name>.svg (name = lowercase, no spaces). Done: file matches SVG Requirements
  2. Add manifest entry — append to media/icons-src/icons.json per icons.json Format. Done: key + id + description present
  3. Run build — npm run build:icons -w salesforcedx-vscode-services. Done: auto-generated artifacts updated — verify git diff (see Artifacts)
  4. Add ICONS constant — src/vscode/mediaService.ts: ICONS + ICON_DESCRIPTION_KEYS; add i18n key in messages if needed. Done: new icon in both maps, compiles
  5. Regenerate types — if services-types consumes ICONS, run its generate script. Done: icons.ts includes new icon

icons.json Format

json
{
  "leaf": { "id": "sf-org-leaf", "description": "Leaf icon for default scratch org" },
  "tree": { "id": "sf-org-tree", "description": "Tree icon for default dev hub" }
}
  • Append new icons (order affects 0xe001, 0xe002, … code point assignments)
  • Key = SVG filename without .svg
  • id = VS Code icon ID (use sf-org-* for custom icons)
  • description = human-readable, used in contributes.icons

Artifacts that change (add/remove)

ArtifactAddRemove
media/icons-src/<name>.svgcreatedelete
media/icons-src/icons.jsonadd entryremove entry
package.json → contributes.iconsauto (build:icons)auto
resources/icons-font/*auto (build:icons)auto
src/vscode/mediaService.ts → ICONS, ICON_DESCRIPTION_KEYSmanualmanual
src/messages/* (i18n)manual if neededmanual
salesforcedx-vscode-services-types (icons.ts)manual (generate script)manual

Verification

Run npm run test -w salesforcedx-vscode-services — iconConsistency.test.ts validates SVG ↔ icons.json ↔ contributes.icons ↔ ICONS constant.

© forcedotcom, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/icons-src of forcedotcom/salesforcedx-vscode.

Open the folder on GitHubat commit f7bb6fe

Compare with similar skills

Icons Src next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Icons Src compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Icons Src this skillforcedotcom/salesforcedx-vscode1k—~891Automated safety check: PassBSD-3-Clause
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Better Iconsdtsola/xiaoyaosearch1k2 repos~895Automated safety check: PassCustom licence
Fluent Icons Lookupcoltongriffith/fluenticons442—~492Automated safety check: PassNone
Review UI DesignColourCloudSky/review-ui-design-skill119—~1.4kAutomated safety check: PassMIT
RayRailly/tinte624—~712Automated safety check: PassMIT

Similar skills

  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed
  • Better Icons

    dtsola/xiaoyaosearch

    Searches more than 200 Iconify icon libraries and fetches icons as SVG from a command line tool or an MCP server.

    1k GitHub starsUsed in 2 repos~895 tokens
    Frontend & DesignAuto-check passed
  • Fluent Icons Lookup

    coltongriffith/fluenticons

    Looks up Microsoft Fluent UI System Icons and their exact @fluentui/react-icons component names through the Fluent Icons MCP server or HTTP API, instead of guessing.

    442 GitHub stars~492 tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Review UI Design

    ColourCloudSky/review-ui-design-skill

    评审单份或一组产品 UI 设计稿,像资深设计专家团一样从视觉质量、交互体验、设计系统三个方面发现问题并给出具体、可执行、按优先级排序的优化建议;在可行时默认生成与报告编号对应的问题标注图和优化建议图,并支持修改稿增量复评。Use when the user provides UI screenshots, icon sets, screen recordings, product flows…

    119 GitHub stars~1.4k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Ray

    Railly/tinte

    Generate code screenshots via ray.tinte.dev API. An agent skill from Railly/tinte.

    624 GitHub stars~712 tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Solar Icons

    saoudi-h/solar-icons

    Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.

    182 GitHub stars~2.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from forcedotcom/salesforcedx-vscode

All 37 skills in this repo
  • Command UI

    forcedotcom/salesforcedx-vscode

    Command palette, CodeLens, context menus, package.nls titles, and NotificationModeService.

    1k GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • Services Extension Consumption

    forcedotcom/salesforcedx-vscode

    Consume the salesforcedx-vscode-services extension API. An agent skill from forcedotcom/salesforcedx-vscode.

    1k GitHub stars~5k tokensUpdated today
    Auto-check passed
  • Changelog

    forcedotcom/salesforcedx-vscode

    Polish the automated CHANGELOG on develop before the next stable build.

    1k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Core Extension API

    forcedotcom/salesforcedx-vscode

    Public API exported by salesforcedx-vscode-core activate(). An agent skill from forcedotcom/salesforcedx-vscode.

    1k GitHub stars~842 tokensUpdated today
    Auto-check passed
  • Drivable Vscode

    forcedotcom/salesforcedx-vscode

    Operate a real VS Code instance through drivable-vscode. An agent skill from forcedotcom/salesforcedx-vscode.

    1k GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Effect Best Practices

    forcedotcom/salesforcedx-vscode

    Enforces Effect-TS patterns for services, errors, layers, atoms, and Effect.pipe composition.

    1k GitHub stars~6.2k tokensUpdated today
    Auto-check passed

Questions about Icons Src

What does Icons Src do?

Add custom SVG icons to salesforcedx-vscode-services for font generation. Icons Src is an agent skill from forcedotcom/salesforcedx-vscode. Add custom SVG icons to salesforcedx-vscode-services for font generation.

When should I use Icons Src?

Icons Src fits situations like: adding new icons to media/icons-src; creating SVG icons for VS Code extension; defining font-based icons.

How do I install Icons Src in Claude Code?

Run `npx skills add forcedotcom/salesforcedx-vscode --skill icons-src -a claude-code`. Or copy the skill folder (.claude/skills/icons-src in forcedotcom/salesforcedx-vscode) into .claude/skills/icons-src in your project. Claude Code loads it when a task matches its description.

How do I install Icons Src in Codex?

Run `npx skills add forcedotcom/salesforcedx-vscode --skill icons-src -a codex`. Or copy the skill folder (.claude/skills/icons-src in forcedotcom/salesforcedx-vscode) into .agents/skills/icons-src in your project. Codex loads it when a task matches its description.

Can I use Icons Src in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add forcedotcom/salesforcedx-vscode --skill icons-src -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/icons-src, .gemini/skills/icons-src, .github/skills/icons-src and .opencode/skills/icons-src in your project.

What does Icons Src need to run?

Going by SKILL.md and its folder, Icons Src needs the command-line tools its instructions call (npm and git).

Does Icons Src access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Icons Src safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Icons Src use?

Icons Src is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Icons Src use?

About 891 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Icons Src?

Skills that share tags, products or a category with Icons Src: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Better Icons (dtsola/xiaoyaosearch, 1k stars), Fluent Icons Lookup (coltongriffith/fluenticons, 442 stars) and Review UI Design (ColourCloudSky/review-ui-design-skill, 119 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Icons Src?

forcedotcom (a GitHub organization) maintains it in forcedotcom/salesforcedx-vscode, which has 1,035 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on October 7, 2026.

Source: forcedotcom/salesforcedx-vscode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.