skill.md

Devicons has a ready-to-install agent skill. Point Claude, Cursor, or any tool that reads a Claude-style skill at a single URL, and the agent gets the full icon catalog, component usage, CDN URLs, and metadata.

One-line prompt

In any agent conversation:

Read https://devicons.io/skill.md and follow the instructions to use @dev.icons.

The agent fetches the skill and can then generate icon code, pick packages, build CDN URLs, and resolve slugs from free-text queries.

Discovery endpoint

Devicons implements the Cloudflare Agent Skills Discovery spec (v0.2.0). Any compliant client can find the skill at:

https://devicons.io/.well-known/agent-skills/index.json

The index lists each skill with its type, description, artifact URL, and SHA-256 digest. CORS is open.

Skill files

File	URL
Discovery index	/.well-known/agent-skills/index.json
SKILL.md (canonical)	/.well-known/agent-skills/devicons/SKILL.md
SKILL.md (short alias)	/skill.md
reference/icons.md	/skill/reference/icons.md
reference/packages.md	/skill/reference/packages.md

All endpoints have permissive CORS and correct content-types. /skill.md returns the same bytes as the canonical path.

Install locally

If your agent loads skills from a local directory:

SKILL_DIR=~/.claude/skills/devicons
mkdir -p "$SKILL_DIR/reference"
curl -sL https://devicons.io/.well-known/agent-skills/devicons/SKILL.md > "$SKILL_DIR/SKILL.md"
curl -sL https://devicons.io/skill/reference/icons.md > "$SKILL_DIR/reference/icons.md"
curl -sL https://devicons.io/skill/reference/packages.md > "$SKILL_DIR/reference/packages.md"

Change SKILL_DIR to match your tool: ~/.claude/skills/ for Claude Code, ~/.cursor/skills/ for Cursor.

What the skill covers

Once loaded, the agent can:

• Pick the right package for a framework
• Resolve free-text queries (“the Postgres logo”) to canonical slugs
• Generate component imports for React, Vue, or Svelte
• Build pinned CDN URLs for UNPKG, jsDelivr, npmmirror, or Skypack
• Emit <link>, <img>, sprite <use>, or inline-SVG markup
• Read icon metadata: brand colors, tags, aliases, and contrast hints

When the skill triggers

The skill activates when a task mentions:

• A developer brand or logo (“add the React logo”)
• An icon format (SVG, webfont, sprite)
• Tech categories (“a frontend framework”, “a cloud provider”)
• The @dev.icons/* or devicons package names

To force activation, use the one-line prompt above.

Updating

The skill tracks the same data as this website. New icons and CDN routes update the endpoints automatically.

For local installs, re-run the curl commands for a fresh copy.

Under the hood

Generated from the same content collection that drives the icon library:

1. Every icon MDX file carries metadata (tags, popular, recommended, aliases, mainColor, etc.)
2. A script promotes flagship icons per tag to recommended: true
3. Astro endpoints at /skill.md and /skill/reference/* render the collection as markdown
4. Agents consume the markdown directly