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. The agent then gets the package list, component naming rules, SVG URLs, and catalog metadata.

If your tool supports MCP, the MCP server is usually a better fit: the agent calls it for search results, SVG markup, and code instead of reading instructions. For your own integrations, use the Icons API.

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. It can then generate icon code, pick packages, build SVG 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.

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

/skill.md returns the same bytes as the canonical path. For a site-wide overview, see /llms.txt and /llms-full.txt.

Install with the skills CLI

The skills CLI finds the skill through the discovery endpoint and installs it for the agents you pick:

npx skills add https://devicons.io

Add -g to install it for every project.

Install locally

To copy the files by hand, for an agent that 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 SVG URLs (https://devicons.io/devicons/icons/{file}.svg) and pinned font and sprite URLs
• Emit <img>, icon-font, 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 show up in the endpoints with the next deploy.

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 at build time
4. Agents consume the markdown directly