How do I install the Simple Icons skill?

Run npx skillmds@latest add marvin-lijunzan/simple-icons in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Simple Icons skill do?

Brand and technology vector icons library using Simple Icons (simple-icons/simple-icons). Seamlessly embeds thousands of official SVG brand icons for tech stacks, social channels, and tooling ecosystems. It is listed under Coding & Dev Tools on SkillMD.

Is Simple Icons safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Simple Icons?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Simple Icons free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Simple Icons?

Marvin-LiJunZan (@marvin-lijunzan) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Simple Icons by marvin-lijunzan — Agent Skill

Name: Simple Icons
Author: Marvin-LiJunZan

File contents

Simple Icons — Brand & Technology Vector Assets

Simple Icons provides over 3,000 official SVG brand icons for popular technologies, languages, frameworks, cloud providers, and developer tools.

1. Direct SVG Integration Pattern

Every Simple Icon is standardized on a 24x24 viewBox with optimized single-path geometry:

<!-- Example: Python Icon -->
<svg role="img" viewBox="0 0 24 24" width="20" height="20" fill="#3776AB" xmlns="http://www.w3.org/2000/svg">
  <title>Python</title>
  <path d="M14.25.18l.9.2.73.26.59.3..."/>
</svg>

2. Dynamic CDN Integration

When embedding dynamically into documentation, markdown, or lightweight HTML surfaces without local assets:

<!-- Using jsDelivr CDN -->
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/electron.svg" width="24" height="24" alt="Electron" />
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/typescript.svg" width="24" height="24" alt="TypeScript" />
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tailwindcss.svg" width="24" height="24" alt="Tailwind CSS" />
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/pytorch.svg" width="24" height="24" alt="PyTorch" />

3. Pairing Rules

Strict Monochrome Consistency: In toolbars and technical cards, override brand colors with semantic interface tokens (e.g., fill="currentColor" or fill="var(--muted-foreground)"). Reserve full brand colors for badges or dedicated integration showcases.
Equal Aspect Ratios: Always bound icons within identical containers (w-5 h-5 or w-6 h-6) to prevent alignment jitter across multi-row lists.

Frequently asked questions

Simple Icons